/* ==========================================================================
   NEO-BAROQUE — Build with it (Design Completion Campaign, 2026-09-29).
   One more act inside the gilt frame: a single centred column ranked by
   light, the first field lit and each after it a step into shadow. Face is
   the room's own ("BodoniX", declared in x-neo-baroque.css). Every class is
   gnb- or scoped to .gm--neo-baroque. Nothing moves. The dimmest text still
   clears AA on the ground.
   ========================================================================== */
.gm--neo-baroque {
  --gm-tag-inverse: var(--gm-color-ground);
  /* The stage continues through the board: the frame's two side rules
     (2px border, 1px line 6px outside) run on between hero and record. */
  position: relative; box-sizing: border-box;
  width: min(46rem, 100% - 2rem); margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(1.2rem, 4vw, 2.6rem);
  border-inline: 2px solid var(--gm-color-gold);
  color: var(--gm-color-cream); text-align: center;
  font: 400 16px/1.75 var(--gm-font);
}
.gm--neo-baroque::before { content: ""; position: absolute; inset: 0 -9px; border-inline: 1px solid var(--gm-color-gold); pointer-events: none; }
.gm--neo-baroque .gm__head { padding-bottom: 28px; border-bottom: 3px double var(--gm-color-gold); }
.gm--neo-baroque .gm__title { margin: 0 0 12px; color: var(--gm-color-gold-lit); font: 500 clamp(30px, 5vw, 44px)/1.1 var(--gm-font); text-transform: uppercase; letter-spacing: 0.12em; }
.gm--neo-baroque .gm__get a { color: var(--gm-color-gold-lit); }
.gm--neo-baroque .gm-t[data-g="record"] { color: var(--gm-color-ground); background: var(--gm-color-gold-lit); }
.gm--neo-baroque .gm-more summary { color: var(--gm-color-gold-lit); }
.gm--neo-baroque .gm-more { text-align: left; }
.gm--neo-baroque :focus-visible { outline: 2px solid var(--gm-color-gold-lit); outline-offset: 4px; }

/* ---- the column, ranked by light ------------------------------------- */
.gnb-col { display: grid; gap: 0; margin-top: 12px; }
.gnb-f { padding: 30px 0; border-bottom: 1px solid color-mix(in srgb, var(--gm-color-gold) 45%, transparent); }
.gnb-f .gm-f__head { display: grid; justify-items: center; gap: 4px; }
.gm--neo-baroque .gm-f__n { color: var(--gm-color-gold); font: 500 14px/1 var(--gm-font); letter-spacing: 0.18em; }
.gm--neo-baroque .gm-f__name { margin: 0; color: var(--gm-color-gold); font: 600 18px/1.3 var(--gm-font); text-transform: uppercase; letter-spacing: 0.18em; }
.gnb-l0 { background: radial-gradient(ellipse 70% 80% at 50% 45%, var(--gm-color-jewel), transparent 75%); }
.gnb-l0 .gm-f__name { color: var(--gm-color-gold-lit); }
.gnb-l2, .gnb-l3 { color: color-mix(in srgb, var(--gm-color-cream) 82%, var(--gm-color-ground)); }
.gnb-cap { margin: 12px 0 0; font-style: italic; font-size: 15px; }
.gnb-text { margin: 0 auto; max-width: 36rem; }

/* ---- specimens ------------------------------------------------------- */
.gnb-sws { margin: 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 14px; }
.gnb-sws li { display: inline-flex; align-items: center; gap: 8px; }
.gnb-sws span { width: 22px; height: 22px; border: 1px solid var(--gm-color-gold); }
.gnb-sws code { font-size: 12px; }
.gnb-stage { position: relative; width: min(100%, 320px); height: 120px; margin: 0 auto; border: 3px double var(--gm-color-gold); background: radial-gradient(ellipse 40% 55% at 50% 50%, color-mix(in srgb, var(--gm-color-gold-lit) 30%, transparent), transparent 70%), var(--gm-color-ground); }
.gnb-stage i { position: absolute; left: 50%; top: 50%; width: 34px; height: 46px; transform: translate(-50%, -50%); background: var(--gm-color-jewel); border: 1px solid var(--gm-color-gold-lit); }
.gnb-axis { display: flex; justify-content: center; gap: 18px; }
.gnb-axis i { width: 58px; height: 76px; border: 1px solid var(--gm-color-gold); background: var(--gm-color-jewel); opacity: var(--gm-half); }
.gnb-axis .gnb-axis__lit { order: 0; opacity: var(--gm-lit); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--gm-color-gold-lit) 55%, var(--gm-color-jewel)), var(--gm-color-jewel) 70%); }
.gnb-axis i:nth-child(2) { order: -1; }
.gnb-disp { margin: 0 0 10px; color: var(--gm-color-cream); font: 500 var(--gm-size-display)/var(--gm-leading-display) var(--gm-font); text-transform: uppercase; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.gnb-frame { position: relative; width: min(100%, 300px); height: 110px; margin: 0 auto; border: var(--gm-frame); }
.gnb-frame svg { position: absolute; width: 34px; height: 34px; fill: none; stroke: var(--gm-color-gold); stroke-width: 1.6; }
.gnb-frame svg:first-child { left: 6px; top: 6px; transform: scaleY(-1); }
.gnb-frame svg:last-child { right: 6px; top: 6px; transform: scale(-1, -1); }
.gnb-chiaro { width: min(100%, 300px); height: 120px; margin: 0 auto; border: 1px solid var(--gm-color-gold); background: radial-gradient(ellipse 30% 45% at 42% 45%, var(--gm-color-cream), color-mix(in srgb, var(--gm-color-gold) 55%, var(--gm-color-ground)) 30%, var(--gm-color-jewel) 58%, var(--gm-color-ground) 82%); }

/* ---- components ------------------------------------------------------ */
.gnb-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; padding: 6px 0; border-block: 1px solid var(--gm-color-gold); }
.gnb-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--gm-color-gold); font: 600 13px/1 var(--gm-font); text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; }
.gnb-nav a:hover { color: var(--gm-color-gold-lit); }
.gnb-nav a[aria-current] { color: var(--gm-color-gold-lit); background: var(--gm-color-jewel); }
.gnb-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 24px; align-items: center; }
.gnb-card { display: grid; gap: 4px; padding: 30px 16px; border: 3px double var(--gm-color-gold); color: var(--gm-color-cream); text-decoration: none; background: radial-gradient(ellipse 60% 60% at 50% 40%, var(--gm-color-jewel), var(--gm-color-ground) 72%); }
.gnb-card:hover { background: radial-gradient(ellipse 85% 80% at 50% 40%, var(--gm-color-jewel), var(--gm-color-ground) 80%); }
.gnb-card b { color: var(--gm-color-gold-lit); font: 600 16px/1.3 var(--gm-font); text-transform: uppercase; letter-spacing: 0.16em; }
.gnb-form { display: grid; gap: 8px; justify-items: center; }
.gnb-form label { color: var(--gm-color-gold); font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; }
.gnb-form input { width: 100%; min-height: 2.75rem; padding: 0 8px; border: 0; border-bottom: 1px solid var(--gm-color-gold); border-radius: 0; background: transparent; color: var(--gm-color-cream); font: inherit; text-align: center; }
.gnb-form input:focus { border-bottom: 2px solid var(--gm-color-gold-lit); }
.gnb-btn { min-height: 44px; padding: 0 26px; border: 3px double var(--gm-color-gold); background: var(--gm-color-ground); color: var(--gm-color-gold-lit); font: 600 13px/1 var(--gm-font); text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer; }
.gnb-btn:hover { background: var(--gm-color-jewel); }
.gnb-btn:active { border-color: var(--gm-color-gold-lit); }

@media (max-width: 640px) {
  .gnb-ui { grid-template-columns: minmax(0, 1fr); }
}