/* ==========================================================================
   ARCHIVE — page-specific layout only.
   Source: Master Specification §4.3.
   ========================================================================== */
.a-arrival{ padding:140px 0 var(--pad-lead); }
.a-arrival h1{ font-family:var(--f-display); font-weight:400; font-size:clamp(34px,5vw,58px); max-width:14ch; margin-top:16px; letter-spacing:var(--ls-head); line-height:var(--lh-mega); text-wrap:balance; }
.a-arrival p{ max-width:44ch; color:var(--ink-soft); font-size:15px; line-height:var(--lh-body); margin-top:18px; font-variant-numeric:oldstyle-figures; }

/* ============================== CATEGORY NAV ==============================
   "Alternative 4" — a single continuous architectural datum line the
   whole typology index registers against: a custom hand-drawn diagram
   mark above the line (nemax_typology_symbol_svg(), inc/template-tags.php),
   the category name below it. Deliberately NOT boxed buttons — no border,
   no fill, no pill — so it reads as drawing notation/an index rather than
   a website filter row. .cat-track is the true (potentially wider-than-
   viewport) content width the datum line and the active red segment are
   measured against; .a-categories is only the viewport-clipped scroll
   window around it. Every vertical offset below is one shared rhythm
   (symbol box height → gap → node → gap → label) so the datum's fixed
   `top` lines up with every button's node regardless of its own symbol.
   ==================================================================== */
.a-categories{ position:relative; padding-bottom:32px; }
.cat-track{
  position:relative; display:inline-flex; align-items:flex-start; min-width:100%;
  gap:clamp(24px, 4vw, 56px); justify-content:space-between;
}
.cat-datum{ position:absolute; left:0; right:0; top:34.5px; height:1px; background:var(--ink); opacity:.3; pointer-events:none; }
.cat-btn{
  position:relative; display:flex; flex-direction:column; align-items:center; flex-shrink:0;
  min-height:44px; background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ink-soft);
  transition:color 300ms var(--ease-instrument);
}
.cat-symbol{ height:24px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:8px; color:var(--ink); opacity:.68; transition:opacity 300ms var(--ease-instrument), color 300ms var(--ease-instrument); }
.cat-symbol svg{ width:23px; height:23px; display:block; }
.cat-node{ width:5px; height:5px; margin-bottom:14px; border-radius:50%; background:var(--ink); opacity:0; transition:opacity 300ms var(--ease-instrument), background-color 300ms var(--ease-instrument), width 300ms var(--ease-instrument), height 300ms var(--ease-instrument); }
.cat-btn:hover .cat-symbol, .cat-btn:focus-visible .cat-symbol{ opacity:1; }
.cat-btn:hover .cat-label, .cat-btn:focus-visible .cat-label{ color:var(--ink); }
.cat-btn:hover .cat-node, .cat-btn:focus-visible .cat-node{ opacity:.5; }
.cat-btn:focus-visible{ outline:2px solid var(--stamp); outline-offset:6px; }
/* Active — colour only, on the symbol/label/node already in the markup,
   plus one short red segment of the shared datum at that node. Never a
   box, fill, or full-line colour change — the rest of the datum stays
   the quiet hairline above. */
.cat-btn[aria-pressed="true"] .cat-symbol{ opacity:1; color:var(--stamp); }
.cat-btn[aria-pressed="true"] .cat-label{ color:var(--stamp); }
.cat-btn[aria-pressed="true"] .cat-node{ opacity:1; background:var(--stamp); width:7px; height:7px; }
.cat-btn[aria-pressed="true"]::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:34.5px; width:28px; height:1px; background:var(--stamp); pointer-events:none;
}

@media (max-width:1023px){
  .a-categories{
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
    margin-inline:calc(var(--edge) * -1); padding-inline:var(--edge);
  }
  .a-categories::-webkit-scrollbar{ display:none; }
  .cat-track{ min-width:max-content; justify-content:flex-start; gap:28px; }
  .cat-symbol{ height:20px; margin-bottom:7px; }
  .cat-symbol svg{ width:19px; height:19px; }
  .cat-node{ margin-bottom:12px; }
  .cat-datum, .cat-btn[aria-pressed="true"]::after{ top:29.5px; }
  .cat-btn{ font-size:10px; letter-spacing:.11em; }
}
@media (max-width:639px){
  .cat-track{ gap:24px; }
}

.a-filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:24px; padding:0 0 var(--pad-lead); border-bottom:1px solid var(--line); }
.a-filter{ min-width:160px; }
.a-filter label{ font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:10px; }
.a-filter select{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:12px; letter-spacing:var(--ls-tight); padding:8px 0; color:var(--ink); transition:border-color var(--i2) var(--ease-instrument); appearance:none; -webkit-appearance:none; cursor:pointer; }
.a-filter select:focus{ border-color:var(--stamp); outline:none; }
.a-reset{ align-self:flex-end; margin-bottom:8px; }
.a-reset-icon{ --icon-size:12px; margin-right:5px; opacity:.6; }
.a-search-toggle{ align-self:flex-end; margin-bottom:8px; }
.a-search-compact{
  align-self:flex-end; margin-bottom:8px; display:inline-flex; overflow:hidden; flex-shrink:0;
  width:0; opacity:0;
  transition:width var(--i2) var(--ease-instrument), opacity var(--i2) var(--ease-instrument);
}
.a-search-compact.is-open{ width:clamp(140px,40vw,220px); opacity:1; }
.a-search-input-compact{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:12px; letter-spacing:var(--ls-tight); padding:8px 0; color:var(--ink);
  transition:border-color var(--i2) var(--ease-instrument);
}
.a-search-input-compact:focus{ border-color:var(--stamp); outline:none; }
.a-count{ font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); letter-spacing:var(--ls-tight); margin-left:auto; align-self:flex-end; margin-bottom:8px; }

/* ============================== LOCATIONS / GLOBE ==============================
   A dark full-bleed panel — the same device Drawings/Credits already use to
   read as "a different register within the same system," not a new style.
   Deliberately compact: text and object sit side by side (the same pairing
   Home's Room A/C layouts already use) so the globe supports the Archive
   rather than becoming a full section of its own. The globe itself is
   plain canvas (assets/js/globe.js); this file only styles its frame,
   tooltip and reset control.
   ==================================================================== */
.a-locations{ padding:var(--pad-beat) 0; }
.a-locations-inner{ display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center; }
.a-locations-text{ max-width:520px; }
.a-locations h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(22px,2.6vw,30px); max-width:18ch; margin-inline:auto; margin-top:10px; letter-spacing:var(--ls-head); line-height:var(--lh-mega); text-wrap:balance; }
.a-locations-note{ color:var(--on-dark-soft); font-size:13px; line-height:var(--lh-body); margin-top:10px; max-width:40ch; margin-inline:auto; font-variant-numeric:oldstyle-figures; }
@media (min-width:860px){
  .a-locations-inner{ flex-direction:row; align-items:center; justify-content:space-between; gap:clamp(32px,5vw,64px); text-align:left; }
  .a-locations h2, .a-locations-note{ margin-inline:0; }
}
/* NEMA X → Globe → Size & position — --globe-offset-x/y are set inline
   per-request (archive-project.php) from the admin's Vertical/Horizontal
   Position fields; the canvas itself resizes in JS (globe.js's resize())
   reading --globe-scale, so the transform here only ever nudges position,
   never size. */
.globe-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; flex-shrink:0; transform:translate(var(--globe-offset-x,0), var(--globe-offset-y,0)); }
.globe-canvas{ cursor:grab; touch-action:none; filter:var(--globe-filter,none); opacity:var(--globe-opacity,1); }
.globe-canvas:active{ cursor:grabbing; }
/* A quiet annotation, not a UI tooltip — no fill, no border, no shadow.
   Reads like a label written directly on a technical drawing: small
   uppercase mono type on the dark section, a single hairline underscoring
   the place name. Multi-line content (name / optional coordinates /
   project count) stacks tightly, each its own short line. */
.globe-tooltip{
  position:absolute; pointer-events:none; transform:translate(-50%,-130%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--on-dark); white-space:nowrap; z-index:2;
}
.globe-tooltip-name{ color:var(--paper); padding-bottom:2px; border-bottom:1px solid var(--stamp); }
.globe-tooltip-meta{ color:var(--on-dark-soft); font-size:9px; letter-spacing:var(--ls-tight); }
.globe-reset{ margin-top:16px; }

/* ============================== ARCHIVE GRID ==============================
   Editorial Project Card grid — exactly three card types (Feature/
   Standard/Portrait, resolved in template-parts/project-card.php from
   nemax_archive_card_type()), placed on one CSS Grid with plain
   left-to-right auto-flow. No masonry, no absolute positioning, no
   per-card independent widths: every card's width is either 1 or 2
   column tracks and every row's height is simply however tall that row's
   own tallest card is — normal CSS Grid auto-row sizing, not a reflow
   library. align-items:start (not stretch) so a Portrait card sitting
   next to shorter Standard cards keeps its own natural height instead of
   being forced to match theirs. ==================================== */
.a-grid-section{ padding:var(--pad-tight) 0; }
.a-grid{
  display:grid; grid-template-columns:1fr; align-items:start;
  column-gap:clamp(20px,2.2vw,28px); row-gap:clamp(30px,4vw,48px);
  transition:opacity var(--i2) var(--ease-instrument);
}
.a-grid.is-loading{ opacity:.35; }
@media (min-width:768px){ .a-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .a-grid{ grid-template-columns:repeat(4,1fr); } }
/* Feature only actually spans 2 tracks once there are at least 2 to span
   (tablet/desktop) — on the single-column mobile grid it stays span:1 so
   it never claims a 2nd, nonexistent column. */
@media (min-width:768px){ .card--feature{ grid-column:span 2; } }

.a-loadmore{ text-align:center; margin-top:var(--pad-lead); }
.a-state{ text-align:center; padding:var(--pad-standard) var(--edge); }
.a-state .plate{ max-width:420px; margin:0 auto 28px; aspect-ratio:5/4; }
.a-state p{ font-family:var(--f-mono); font-size:12px; letter-spacing:var(--ls-tight); color:var(--ink-soft); }
.a-state .link-mono{ display:inline-block; margin-top:14px; }