@font-face {
  font-family: "Archivo";
  src: url("/wp-content/themes/grenier/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/wp-content/themes/grenier/fonts/spacemono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/wp-content/themes/grenier/fonts/spacemono-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  
  --gi-bg:        #928d87;
  --gi-panel:     #a19b93;
  --gi-panel-2:   #aea89f;
  --gi-line:      rgba(30,22,16,.22);
  --gi-line-strong: rgba(30,22,16,.42);
  --gi-ink:       #15120f;
  --gi-ink-dim:   #2a231d;
  --gi-ink-faint: #26201a;
  --gi-accent:    #b81e8f;
  --gi-accent-ink:#4e0433;
  --gi-accent-dim:#f0c7e2;
  --gi-phosphor:  #ff6fd6; 

  
  --gi-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gi-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  
  --gi-tempo-1: 110ms;
  --gi-tempo-2: 260ms;
  --gi-tempo-3: 540ms;
  --gi-ease-step: steps(6, end);
  --gi-ease-linear: linear;

  --gi-container: 1320px;
  --gi-radius: 2px; 
}


*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gi-bg);
  color: var(--gi-ink);
  font-family: var(--gi-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--gi-accent-ink); }
h1, h2, h3, h4 { font-family: var(--gi-mono); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
::selection { background: var(--gi-accent); color: #fff6fb; }
:focus-visible { outline: 2px solid var(--gi-accent); outline-offset: 2px; }
scrollbar-color: var(--gi-accent) var(--gi-bg);
* { scrollbar-color: var(--gi-accent) var(--gi-bg); scrollbar-width: thin; }

.container { max-width: var(--gi-container); margin: 0 auto; padding: 0 1.25rem; }


body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(
    to bottom, rgba(20,15,10,.025) 0px, rgba(20,15,10,.025) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: multiply;
}


.band { width: 100%; position: relative; }
.band__inner { max-width: var(--gi-container); margin: 0 auto; padding: 0 1.25rem; position: relative; z-index: 1; }


.band--grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--gi-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gi-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
          mask-image: linear-gradient(to bottom, black, transparent);
}

.band--glow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 380px at 78% 15%, rgba(221,49,178,.16), transparent 70%);
}


.title-block {
  border: 1px solid var(--gi-line-strong);
  background: var(--gi-panel);
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0 2rem;
}
.title-block__row {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  font-family: var(--gi-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--gi-ink-dim); text-transform: uppercase;
  border-bottom: 1px solid var(--gi-line); padding-bottom: .6rem; margin-bottom: .8rem;
}
.title-block__row span b { color: var(--gi-ink); font-weight: 700; }
.title-block h1, .title-block h2 {
  margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.35rem); color: var(--gi-ink);
}

.blink-cursor {
  display: inline-block; width: .48em; height: .95em; background: var(--gi-accent);
  margin-left: .12em; vertical-align: -0.12em;
}
@media (prefers-reduced-motion: no-preference) {
  .blink-cursor { animation: gi-cursor-blink 1.1s step-end infinite; }
}
@keyframes gi-cursor-blink { 50% { opacity: 0; } }

.title-block__sub { color: var(--gi-ink-dim); font-family: var(--gi-sans); margin-top: .5rem; }


.hub-intro { font-family: var(--gi-sans); line-height: 1.6; margin: 1rem 0 1.5rem; }
.hub-intro p { margin: 0; }


.minitel { --mt-w: 210px; --mt-h: 150px; --mt-d: 120px; perspective: 1000px; }
.minitel__rig {
  position: relative; width: var(--mt-w); height: calc(var(--mt-h) + 58px); margin: 0 auto;
  transform-style: preserve-3d; transform: rotateX(10deg) rotateY(-24deg);
  filter: drop-shadow(6px 18px 14px rgba(20,14,10,.38));
}
.minitel__unit { position: absolute; top: 0; left: 0; width: var(--mt-w); height: var(--mt-h); transform-style: preserve-3d; }
.minitel__face { position: absolute; border: 1px solid rgba(0,0,0,.35); box-sizing: border-box; }
.minitel__face--front {
  width: var(--mt-w); height: var(--mt-h); left: 0; top: 0;
  transform: translateZ(calc(var(--mt-d) / 2));
  background: #f2ecdf; display: flex; align-items: center; justify-content: center; padding: 14px;
}
.minitel__face--top {
  width: var(--mt-w); height: var(--mt-d); left: 0; top: calc((var(--mt-h) - var(--mt-d)) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--mt-h) / 2));
  background: #fbf7ef;
}
.minitel__face--side {
  width: var(--mt-d); height: var(--mt-h); left: calc((var(--mt-w) - var(--mt-d)) / 2); top: 0;
  transform: rotateY(90deg) translateZ(calc(var(--mt-w) / 2));
  background: #cfc5ae;
}
.minitel__screen {
  width: 100%; height: 72%; background: #0c0b0a; border: 3px solid #33302a; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; padding: 8px;
  box-shadow: inset 0 0 22px rgba(221,49,178,.28), inset 0 0 0 1px rgba(255,255,255,.04);
  position: relative; overflow: hidden;
}

.minitel__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.08) 0%, transparent 22%);
}
.minitel__vents { position: absolute; left: 10px; bottom: 8px; display: flex; gap: 3px; }
.minitel__vents span { width: 3px; height: 10px; background: rgba(0,0,0,.22); }
.minitel__led {
  position: absolute; right: 10px; bottom: 10px; width: 6px; height: 6px; border-radius: 50%;
  background: #ff4fb0; box-shadow: 0 0 4px 1px rgba(255,79,176,.8);
}
@media (prefers-reduced-motion: no-preference) {
  .minitel__led { animation: gi-led-pulse 2.6s ease-in-out infinite; }
}
@keyframes gi-led-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.minitel__line {
  font-family: var(--gi-mono); font-size: .62rem; letter-spacing: .04em;
  color: var(--gi-phosphor); text-transform: uppercase; text-align: center;
  text-shadow: 0 0 6px rgba(255,111,214,.75);
  transition: opacity var(--gi-tempo-1) var(--gi-ease-linear);
}
.minitel__base {
  position: absolute; top: 0; left: 0; width: var(--mt-w); height: 58px; transform-style: preserve-3d;
  transform: translateY(calc(var(--mt-h) - 10px));
}
.minitel__face--basetop {
  width: var(--mt-w); height: 70px; left: 0; top: -6px;
  transform: rotateX(90deg) translateZ(29px);
  background:
    repeating-linear-gradient(to right, transparent 0 13%, rgba(60,50,35,.28) 13% 16%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 8%, transparent 8% 12%, rgba(60,50,35,.18) 88% 100%),
    linear-gradient(180deg, #efe6d1, #d6cbae);
}
.minitel__face--basefront {
  width: var(--mt-w); height: 58px; left: 0; top: 0;
  transform: translateZ(35px);
  background: #ddd2b9;
}


@media (prefers-reduced-motion: reduce) { .minitel__line[data-cycle] { animation: none !important; } }


.kb {
  border: 1px solid var(--gi-line-strong); background: var(--gi-panel);
  padding: 1rem 1rem 1.2rem; max-width: 560px;
}
.kb__screen {
  display: flex; gap: .5rem; margin-bottom: 1rem;
}
.kb__input {
  flex: 1; font-family: var(--gi-mono); font-size: 1rem; background: #0c0b0a; color: var(--gi-phosphor);
  border: 3px solid #33302a; padding: .55rem .7rem; box-shadow: inset 0 0 14px rgba(255,111,214,.22);
  text-transform: uppercase; letter-spacing: .03em;
}
.kb__input::placeholder { color: #a56f8f; }
.kb__row { display: flex; gap: .32rem; margin-bottom: .32rem; justify-content: center; }
.kb-key {
  font-family: var(--gi-mono); font-size: .8rem; font-weight: 700; text-transform: uppercase;
  min-width: 2.1rem; min-height: 44px; padding: .5rem .3rem; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  background: var(--gi-panel-2); color: var(--gi-ink); border: 1px solid var(--gi-line-strong);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  box-shadow: 0 3px 0 rgba(20,15,10,.45), 0 4px 5px rgba(20,15,10,.2);
  transform: translateY(0);
  transition: transform 90ms var(--gi-ease-linear), box-shadow 90ms var(--gi-ease-linear), background 90ms;
}
.kb-key:hover { background: #fff; }
.kb-key:active, .kb-key.is-pressed {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(20,15,10,.45), 0 1px 2px rgba(20,15,10,.2);
  background: var(--gi-accent-dim);
}
.kb-key--wide { min-width: 6rem; }
.kb-key--accent { background: var(--gi-accent); color: #fff6fb; border-color: var(--gi-accent-ink); }
.kb-key--accent:hover { background: var(--gi-accent-ink); }

.kb-results { margin-top: 1.2rem; }
.kb-results ul { list-style: none; margin: 0; padding: 0; }
.kb-results li { border-bottom: 1px solid var(--gi-line); }
.kb-results a { display: block; padding: .6rem 0; text-decoration: none; color: var(--gi-ink); border: none !important; }
.kb-results a:hover { color: var(--gi-accent-ink); }
.kb-results__kicker { display: block; font-family: var(--gi-mono); font-size: .65rem; color: var(--gi-accent-ink); text-transform: uppercase; }
.kb-results__empty { font-family: var(--gi-mono); font-size: .82rem; color: var(--gi-ink-dim); padding: .6rem 0; }

.search-layout { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; margin-top: 1.5rem; }

.search-layout .kb { flex: 0 0 auto; width: 560px; max-width: 100%; position: sticky; top: 84px; }
@media (max-width: 899px) { .search-layout .kb { position: static; } }
.search-layout__notes { flex: 1 1 360px; min-width: 300px; }
.search-layout__notes h2:first-child { margin-top: 0; }


.shelf {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: 2.2rem; flex-wrap: wrap; padding: 2.6rem 1rem 0;
}
.shelf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: linear-gradient(180deg, #8a7256, #5f4c37);
  box-shadow: 0 6px 10px rgba(20,14,10,.35);
}
.shelf--slim { padding: 1.2rem 1rem 0; gap: 1.6rem; transform: scale(.62); transform-origin: bottom center; margin-bottom: -1.4rem; }


.g-floppy { width: 72px; height: 72px; position: relative; margin-bottom: 10px; transform: rotate(-4deg); }
.g-floppy__body {
  position: absolute; inset: 0; background: linear-gradient(155deg, #2b2f3a, #12141a);
  border-radius: 2px; box-shadow: 4px 10px 10px rgba(20,14,10,.35);
}
.g-floppy__notch { position: absolute; top: 0; left: 14px; width: 14px; height: 6px; background: var(--gi-bg); }
.g-floppy__label {
  position: absolute; left: 8px; right: 8px; top: 10px; height: 34px; background: #eee7d8;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.g-floppy__label span { display: block; height: 2px; background: #b9ae95; margin: 7px 8px 0; }
.g-floppy__shutter {
  position: absolute; right: 6px; bottom: 8px; width: 26px; height: 30px; background: linear-gradient(90deg,#c7cbd3,#8b909c);
  border-radius: 1px; transition: transform var(--gi-tempo-3) var(--gi-ease-linear);
}
.g-floppy:hover .g-floppy__shutter { transform: translateY(-22px); }


.g-cassette { width: 104px; height: 66px; position: relative; margin-bottom: 8px; transform: rotate(3deg); }
.g-cassette__body {
  position: absolute; inset: 0; background: linear-gradient(160deg, #3a2c26, #1c1512);
  border-radius: 3px; box-shadow: 4px 10px 10px rgba(20,14,10,.35);
}
.g-cassette__window {
  position: absolute; left: 10px; right: 10px; top: 10px; height: 30px; background: #cdbfa8;
  opacity: .9;
}
.g-cassette__reel {
  position: absolute; top: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: #17110d; box-shadow: 0 0 0 2px #cdbfa8 inset;
}
.g-cassette__reel::before, .g-cassette__reel::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: #6b5c4d;
  transform: translate(-50%,-50%);
}
.g-cassette__reel::after { transform: translate(-50%,-50%) rotate(90deg); }
.g-cassette__reel--l { left: 14px; }
.g-cassette__reel--r { right: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .g-cassette__reel { animation: gi-reel-spin 5s linear infinite; }
}
@keyframes gi-reel-spin { to { transform: rotate(360deg); } }


.g-joystick { width: 64px; height: 78px; position: relative; margin-bottom: 6px; }
.g-joystick__base {
  position: absolute; bottom: 0; left: 4px; right: 4px; height: 20px; background: linear-gradient(180deg,#3a3128,#221c17);
  border-radius: 3px; box-shadow: 3px 8px 8px rgba(20,14,10,.35);
}
.g-joystick__base i { position: absolute; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gi-accent); }
.g-joystick__base i:nth-child(1) { left: 8px; }
.g-joystick__base i:nth-child(2) { left: 22px; background: #d8cdb8; }
.g-joystick__stick {
  position: absolute; bottom: 17px; left: 50%; width: 6px; height: 42px; background: linear-gradient(90deg,#4a4038,#221c17);
  transform-origin: bottom center; transform: translateX(-50%) rotate(0deg);
}
.g-joystick__ball {
  position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5fae, #8f0f5f); transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
  .g-joystick__stick { animation: gi-joystick-sway 3.4s ease-in-out infinite; }
}
@keyframes gi-joystick-sway { 0%,100% { transform: translateX(-50%) rotate(-6deg); } 50% { transform: translateX(-50%) rotate(7deg); } }


.hero-row { display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap; }
.hero-text { flex: 1 1 420px; min-width: 280px; }
.hero-photo {
  flex: 0 0 auto; width: min(100%, 480px); position: relative; margin: 0;
  border: 1px solid var(--gi-line-strong); background: var(--gi-panel); padding: 10px;
  box-shadow: 6px 14px 18px rgba(20,14,10,.28);
}
.hero-photo img { width: 100%; height: auto; display: block; }

@media (max-height: 500px) and (orientation: landscape) {
  .hero-row { flex-wrap: nowrap; align-items: flex-start; gap: 1.2rem; }
  .hero-text { flex: 1 1 auto; min-width: 0; }
  .hero-text h1 { font-size: 1.35rem; margin-bottom: .4rem; }
  .hero-text p { font-size: .85rem; }
  .hero-photo { flex: 0 0 auto; width: clamp(220px, 34vw, 320px); padding: 8px; }
  .hero-photo::after { font-size: .55rem; left: 14px; padding: .1rem .4rem; }
}


.item-figure__frame { width: 100%; aspect-ratio: 21 / 8; max-height: 380px; overflow: hidden; }
.item-figure__frame picture, .item-figure__frame img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center;
}
.hero-photo::after {
  content: "FIG. 01 – TERMINAL"; position: absolute; left: 20px; bottom: -11px;
  background: var(--gi-panel); border: 1px solid var(--gi-line-strong);
  font-family: var(--gi-mono); font-size: .6rem; letter-spacing: .06em; color: var(--gi-ink-dim);
  padding: .15rem .5rem;
}

.hero-photo__ai-badge {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  background: rgba(20,14,10,.72); border: 1px solid rgba(255,255,255,.55); border-radius: .3rem;
  color: #fff; font-family: var(--gi-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; padding: .2rem .45rem; pointer-events: none;
}
.hero-photo__ai-note {
  display: block; margin-top: .4rem; font-family: var(--gi-mono); font-size: .62rem;
  color: var(--gi-ink-dim); letter-spacing: .02em;
}

.hero-photo { transition: transform var(--gi-tempo-2) var(--gi-ease-linear), box-shadow var(--gi-tempo-2) var(--gi-ease-linear); }
.hero-photo:hover { transform: translateY(-4px); box-shadow: 8px 20px 22px rgba(20,14,10,.34); }
.hero-photo__screen {
  position: absolute; left: 31%; top: 12%; width: 33%; height: 40%;
  overflow: hidden; pointer-events: none; mix-blend-mode: screen;
}

.hero-photo__cursor {
  position: absolute; left: 8%; width: 86%; height: 6.5%;
  background: rgba(255,111,214,.4);
  top: 45%;
  --row-nudge: 0px;
  
  transform: rotate(3.7deg) translateY(var(--row-nudge));
  transform-origin: left center;
  transition: transform 260ms ease;
}

.shelf__cable { position: absolute; left: 0; right: 0; bottom: 46px; pointer-events: none; }
.shelf__cable svg { width: 100%; height: 40px; display: block; overflow: visible; }
.shelf__pulse {
  position: absolute; bottom: 46px; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gi-phosphor); box-shadow: 0 0 6px 2px rgba(255,111,214,.8);
  offset-path: path("M 0 20 Q 25% 0 50% 20 T 100% 20");
  offset-distance: 0%;
}
@media (prefers-reduced-motion: no-preference) {
  .shelf__pulse { animation: gi-pulse-travel 9s linear infinite; }
}
@keyframes gi-pulse-travel { to { offset-distance: 100%; } }
.shelf__waypoint { fill: var(--gi-panel); stroke: var(--gi-line-strong); stroke-width: 2; }
.shelf__waypoint--end { fill: var(--gi-accent); stroke: var(--gi-accent-ink); }


.code-scrap {
  position: absolute; font-family: var(--gi-mono); font-size: .68rem; color: var(--gi-ink);
  opacity: .16; white-space: nowrap; pointer-events: none; letter-spacing: .02em;
}


.timeline { position: relative; margin-top: 2rem; padding-left: 108px; }
.timeline::before { content: ""; position: absolute; left: 92px; top: 6px; bottom: 6px; width: 2px; background: var(--gi-line-strong); }
.timeline__entry { position: relative; margin-bottom: 2rem; }
.timeline__year {
  position: absolute; left: -108px; top: 0; width: 84px; text-align: right;
  font-family: var(--gi-mono); font-weight: 700; font-size: 1rem; color: var(--gi-accent-ink);
  padding-top: .15rem;
}
.timeline__entry::before {
  content: ""; position: absolute; left: -16px; top: .3rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gi-bg); border: 2px solid var(--gi-accent); z-index: 1;
}
.timeline__card {
  background: var(--gi-panel); border: 1px solid var(--gi-line); padding: 1rem 1.2rem;
}
.timeline__card h2 { margin: 0 0 .4rem; font-size: 1.02rem; font-weight: 700; }
.timeline__card p { margin: 0 0 .7rem; color: var(--gi-ink-dim); }
.timeline__card:last-child p { margin-bottom: 0; }
.timeline__card .btn { margin-top: .2rem; }
@media (max-width: 560px) {
  .timeline { padding-left: 20px; }
  .timeline::before { left: 4px; }
  .timeline__year { position: static; text-align: left; width: auto; margin-bottom: .3rem; }
  .timeline__entry::before { left: -16px; top: 1.6rem; }
}


.compare-picker { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin: 1.5rem 0 2rem; }
.compare-picker__field { display: flex; flex-direction: column; gap: .3rem; }
.compare-picker__field label { font-family: var(--gi-mono); font-size: .7rem; text-transform: uppercase; color: var(--gi-ink-dim); }
.compare-picker select {
  font-family: var(--gi-mono); font-size: .85rem; background: var(--gi-panel); color: var(--gi-ink);
  border: 1px solid var(--gi-line-strong); padding: .55rem .6rem; min-width: 220px;
}
.compare-legend { font-family: var(--gi-mono); font-size: .78rem; color: var(--gi-ink-dim); margin: 0 0 .6rem; display: flex; gap: 1.5rem; }
.compare-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; font-weight: 700; margin-right: .3em; }
.compare-mark--diff { color: var(--gi-accent-ink); }
.compare-mark--same { color: var(--gi-ink-faint); }
.compare-table th { color: var(--gi-ink-dim); font-weight: 400; }
.compare-table td.compare-diff { color: var(--gi-accent-ink); font-weight: 700; background: rgba(184,30,143,.08); }
.compare-table td.compare-same { color: var(--gi-ink); }

@media (max-width: 700px) {
  .compare-table table.spec-table,
  .compare-table table.spec-table tbody,
  .compare-table table.spec-table tr,
  .compare-table table.spec-table th,
  .compare-table table.spec-table td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .compare-table table.spec-table tr:first-child { display: none; } 
  .compare-table table.spec-table tr { border-bottom: 1px solid var(--gi-line); padding: .6rem 0; }
  .compare-table table.spec-table tr:last-child { border-bottom: none; }
  .compare-table table.spec-table th { padding: 0 0 .4rem; font-weight: 700; color: var(--gi-ink); }
  .compare-table table.spec-table td { padding: .3rem 0 .3rem .9rem; border-left: 2px solid var(--gi-line); }
  .compare-table table.spec-table td::before {
    content: attr(data-label); display: block; font-size: .68rem; color: var(--gi-ink-faint);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem;
  }
  .compare-table table.spec-table td.compare-diff { border-left-color: var(--gi-accent-ink); }
}
.compare-empty { font-family: var(--gi-mono); font-size: .85rem; color: var(--gi-ink-dim); padding: 2rem 0; text-align: center; border: 1px dashed var(--gi-line-strong); }


@media (max-width: 700px) {
  .spec-sheet table.spec-table,
  .spec-sheet table.spec-table tbody,
  .spec-sheet table.spec-table tr,
  .spec-sheet table.spec-table th,
  .spec-sheet table.spec-table td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .spec-sheet table.spec-table tr { padding: .6rem .9rem; }
  .spec-sheet table.spec-table th { padding: 0 0 .3rem; font-weight: 700; color: var(--gi-ink); }
  .spec-sheet table.spec-table td { padding: 0; }
}


.site-header {
  border-bottom: 1px solid var(--gi-line-strong);
  background: var(--gi-bg);
  position: sticky; top: 0; z-index: 50;
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.25rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--gi-ink); min-height: 44px; }
.brand img { width: 34px; height: 34px; }
.brand__word { font-family: var(--gi-mono); font-weight: 700; font-size: .92rem; letter-spacing: .02em; }
.brand__word small { display: block; font-weight: 400; color: var(--gi-ink-dim); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }


.primary-nav { display: none; }
.primary-nav ul { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; }
.primary-nav a {
  font-family: var(--gi-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  text-decoration: none; color: var(--gi-ink-dim); position: relative;
  padding: .4rem .6rem; background: var(--gi-panel); border: 1px solid var(--gi-line-strong);
  box-shadow: 0 3px 0 rgba(20,15,10,.4), 0 4px 4px rgba(20,15,10,.18);
  transform: translateY(0);
  transition: transform 90ms var(--gi-ease-linear), box-shadow 90ms var(--gi-ease-linear), background 90ms;
}
.primary-nav a:hover { background: var(--gi-panel-2); }
.primary-nav a[aria-current="page"] {
  color: #fff6fb; background: var(--gi-accent); border-color: var(--gi-accent-ink);
}

.primary-nav a.is-keypress, .mobile-drawer a.is-keypress {
  animation: gi-key-press 260ms var(--gi-ease-linear);
}
@keyframes gi-key-press {
  0%   { transform: translateY(0);    box-shadow: 0 3px 0 rgba(20,15,10,.4), 0 4px 4px rgba(20,15,10,.18); }
  35%  { transform: translateY(3px);  box-shadow: 0 0 0 rgba(20,15,10,.4), 0 1px 1px rgba(20,15,10,.18); }
  100% { transform: translateY(0);    box-shadow: 0 3px 0 rgba(20,15,10,.4), 0 4px 4px rgba(20,15,10,.18); }
}

.nav-toggle {
  font-family: var(--gi-mono); background: transparent; color: var(--gi-ink);
  border: 1px solid var(--gi-line-strong); padding: .4rem .6rem; font-size: .78rem;
  cursor: pointer; line-height: 1; min-height: 44px; min-width: 44px;
}


.mobile-drawer {
  border-top: 1px solid var(--gi-line-strong);
  max-height: 0; overflow: hidden;
  transition: max-height var(--gi-tempo-3) var(--gi-ease-step);
}

.mobile-drawer.is-open { max-height: min(640px, calc(100vh - 70px)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-drawer ul { list-style: none; margin: 0; padding: .6rem 1.25rem 1rem; }
.mobile-drawer li { border-bottom: 1px solid var(--gi-line); }
.mobile-drawer a {
  display: flex; align-items: center; min-height: 44px; padding: .7rem 0; font-family: var(--gi-mono); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--gi-ink); text-decoration: none;
}

@media (min-width: 880px) {
  .primary-nav { display: block; }
  .nav-toggle, .mobile-drawer { display: none; }
}


.tab-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem; border-bottom: 1px solid var(--gi-line); }
.tab-strip a {
  font-family: var(--gi-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  text-decoration: none; color: var(--gi-ink-dim); padding: .5rem .8rem; border: 1px solid var(--gi-line);
  border-bottom: none; background: var(--gi-panel);
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
}
.tab-strip a[aria-current="page"] { color: var(--gi-ink); border-color: var(--gi-line-strong); background: var(--gi-panel-2); box-shadow: inset 0 2px 0 var(--gi-accent); }


.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem 1rem; padding-top: 12px; }

.item-card {
  background: var(--gi-panel); border: 1px solid var(--gi-line); padding: 1rem 1.3rem 1rem 1rem; text-decoration: none; color: var(--gi-ink);
  display: flex; flex-direction: column; gap: .5rem; position: relative;
  transform: translateY(0);
  transition: transform var(--gi-tempo-1) var(--gi-ease-linear), border-color var(--gi-tempo-1) var(--gi-ease-linear),
              box-shadow var(--gi-tempo-1) var(--gi-ease-linear), background var(--gi-tempo-1) var(--gi-ease-linear);
}
.item-card::before {
  content: ""; position: absolute; left: 12px; top: -11px; width: 44%; min-width: 64px; height: 12px;
  background: var(--gi-panel); border: 1px solid var(--gi-line); border-bottom: none;
  clip-path: polygon(0% 100%, 0% 40%, 20% 0%, 100% 0%, 100% 100%);
  transition: background var(--gi-tempo-1) var(--gi-ease-linear), border-color var(--gi-tempo-1) var(--gi-ease-linear);
}
.item-card::after {
  content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px;
  background: linear-gradient(135deg, transparent 49.5%, var(--gi-line) 50.5%);
  border-left: 1px solid var(--gi-line); border-bottom: 1px solid var(--gi-line);
  transition: border-color var(--gi-tempo-1) var(--gi-ease-linear);
}
.item-card:hover {
  background: var(--gi-panel-2); border-color: var(--gi-accent);
  transform: translateY(-3px); box-shadow: 0 6px 10px rgba(20,15,10,.22);
}
.item-card:hover::before { background: var(--gi-panel-2); border-color: var(--gi-accent); }
.item-card:hover::after { border-color: var(--gi-accent); }
.item-card:hover .item-card__title { color: var(--gi-accent-ink); }

@media (prefers-reduced-motion: no-preference) {
  .card-grid.js-reveal .item-card { opacity: 0; transform: translateY(10px); }
  .card-grid.js-reveal .item-card.is-in {
    animation: gi-card-materialize var(--gi-tempo-2) var(--gi-ease-step) forwards;
  }
  @keyframes gi-card-materialize {
    0%   { opacity: 0; transform: translateY(10px); }
    20%  { opacity: .35; }
    55%  { opacity: .7; }
    100% { opacity: 1; transform: translateY(0); }
  }
}
.item-card__thumb { aspect-ratio: 4/3; background: var(--gi-panel-2); overflow: hidden; border: 1px solid var(--gi-line); }
.item-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-card__icon { width: 26px; height: 26px; color: var(--gi-accent-ink); }
.item-card__icon svg { width: 100%; height: 100%; display: block; }
.item-card__kicker { font-family: var(--gi-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gi-accent-ink); font-variant-numeric: tabular-nums; }
.item-card__title { font-family: var(--gi-mono); font-size: .95rem; font-weight: 700; }
.item-card__meta { font-family: var(--gi-mono); font-size: .72rem; color: var(--gi-ink-faint); }


.spec-sheet { border: 1px solid var(--gi-line-strong); margin: 1.5rem 0; }
.spec-sheet__head {
  font-family: var(--gi-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gi-ink-dim); padding: .55rem .9rem; border-bottom: 1px solid var(--gi-line-strong); background: var(--gi-panel);
}
table.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--gi-line); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table th, .spec-table td { text-align: left; padding: .55rem .9rem; vertical-align: top; }
.spec-table th {
  width: 34%; font-family: var(--gi-mono); font-size: .78rem; color: var(--gi-ink-dim); font-weight: 400;
}
.spec-table td { font-family: var(--gi-mono); font-size: .85rem; }
.spec-table tr:nth-child(even) { background: rgba(255,255,255,.015); }


@media (prefers-reduced-motion: no-preference) {
  .spec-table.js-reveal tr { opacity: 0; transform: translateY(4px); }
  .spec-table.js-reveal tr.is-in {
    animation: gi-materialize var(--gi-tempo-2) var(--gi-ease-step) forwards;
  }
  @keyframes gi-materialize {
    0%   { opacity: 0; transform: translateY(4px); }
    16%  { opacity: .3; }
    50%  { opacity: .6; }
    100% { opacity: 1; transform: translateY(0); }
  }
}

.spec-table tr:not(:last-child) td::after,
.spec-table tr:not(:last-child) th::after { content: none; }
.spec-sheet__foot {
  height: 3px;
  background-image: radial-gradient(circle, var(--gi-line-strong) 1px, transparent 1.4px);
  background-size: 6px 3px;
}


.note-ref { font-family: var(--gi-mono); color: var(--gi-accent-ink); text-decoration: none; font-size: .82em; }
.notes-annex { border-top: 1px dashed var(--gi-line-strong); margin-top: 2rem; padding-top: 1rem; }
.notes-annex__head { font-family: var(--gi-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gi-ink-dim); margin-bottom: .6rem; }
.notes-annex ol { margin: 0; padding-left: 1.4rem; font-size: .92rem; color: var(--gi-ink-dim); }
.notes-annex li { margin-bottom: .4rem; }
.notes-annex li::marker { font-family: var(--gi-mono); color: var(--gi-accent-ink); }


.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.3rem; margin-top: 2rem; border-bottom: 1px solid var(--gi-line); padding-bottom: .4rem; }
.prose h3 { font-size: 1.05rem; margin-top: 1.4rem; color: var(--gi-accent-ink); }
.prose a { text-underline-offset: .18em; }


.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 2.75rem; align-items: start; }
.content-main { min-width: 0; }
.content-rail { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 84px; }
.rail-box { border: 1px solid var(--gi-line-strong); background: var(--gi-panel); }
.rail-box__head {
  font-family: var(--gi-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gi-ink-dim); padding: .55rem .9rem; border-bottom: 1px solid var(--gi-line-strong);
}
.rail-toc ol, .rail-related ul { list-style: none; margin: 0; padding: .7rem .9rem; }
.rail-toc li, .rail-related li { margin-bottom: .55rem; font-size: .84rem; line-height: 1.35; }
.rail-toc li:last-child, .rail-related li:last-child { margin-bottom: 0; }
.rail-toc a, .rail-related a {
  color: var(--gi-ink-dim); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color var(--gi-tempo-1) var(--gi-ease-linear), border-color var(--gi-tempo-1);
}
.rail-toc a:hover, .rail-related a:hover { color: var(--gi-accent-ink); border-color: var(--gi-accent); }
.rail-related__kicker {
  display: block; font-family: var(--gi-mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gi-ink-faint); margin-bottom: .12em;
}
@media (max-width: 900px) {
  .content-layout { display: block; }
  .content-rail { position: static; margin-top: 2rem; }
}


.prose a, .footer-nav a, .breadcrumb a {
  position: relative; text-decoration: none; border-bottom: 1px solid var(--gi-line-strong);
  padding-left: 0; transition: padding-left var(--gi-tempo-1) var(--gi-ease-linear), border-color var(--gi-tempo-1);
}
.prose a::before, .footer-nav a::before, .breadcrumb a::before {
  content: ""; position: absolute; left: -.85em; top: .14em; width: .5em; height: .82em;
  background: var(--gi-accent); opacity: 0; transform: translateX(-2px);
  transition: opacity var(--gi-tempo-1) var(--gi-ease-linear), transform var(--gi-tempo-1) var(--gi-ease-linear);
}
.prose a:hover, .footer-nav a:hover, .breadcrumb a:hover { border-color: var(--gi-accent); padding-left: .85em; }
.prose a:hover::before, .footer-nav a:hover::before, .breadcrumb a:hover::before { opacity: 1; transform: translateX(0); }


.faq-appendix { margin: 2rem 0; border: 1px solid var(--gi-line-strong); }

h2.faq-appendix__head { font-family: var(--gi-mono); font-size: .72rem; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; color: var(--gi-ink-dim); padding: .55rem .9rem; margin: 0; border-bottom: 1px solid var(--gi-line-strong); background: var(--gi-panel); }
.faq-item { border-bottom: 1px solid var(--gi-line); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  font-family: var(--gi-mono); font-size: .92rem; padding: .8rem .9rem; cursor: pointer;
  list-style: none; display: flex; gap: .6rem; color: var(--gi-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: ">"; color: var(--gi-accent-ink); }
.faq-item[open] summary::before { content: ">_"; }
.faq-item summary h3 { font: inherit; margin: 0; color: inherit; }
.faq-item p { padding: 0 .9rem 1rem 2.3rem; color: var(--gi-ink-dim); margin: 0; }


.btn {
  font-family: var(--gi-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--gi-accent); color: var(--gi-accent-ink); background: transparent;
  padding: .55rem 1rem; text-decoration: none; display: inline-flex; align-items: center;
  min-height: 44px; box-sizing: border-box;
  transition: background var(--gi-tempo-1) var(--gi-ease-linear), color var(--gi-tempo-1) var(--gi-ease-linear);
}
.btn:hover { background: var(--gi-accent); color: #fff6fb; }


.site-footer { border-top: 1px solid var(--gi-line-strong); margin-top: 4rem; padding: 2rem 0; }
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 1rem; padding: 0; font-family: var(--gi-mono); font-size: .78rem; }
.footer-fine { font-family: var(--gi-mono); font-size: .7rem; color: var(--gi-ink-faint); }


.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gi-accent); color: #fff6fb; padding: .6rem 1rem; z-index: 100; font-family: var(--gi-mono); }
.skip-link:focus { left: .5rem; top: .5rem; }
.breadcrumb { font-family: var(--gi-mono); font-size: .74rem; color: var(--gi-ink-faint); margin: 1.2rem 0 0; }
.breadcrumb a { border-bottom: none; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 3rem 0 1rem; }
.section-head h2 { font-size: 1.15rem; margin: 0; }
.section-head .btn { padding: .4rem .7rem; font-size: .68rem; }