/* 60 Archive section: work index and editorial project inner pages. */
.archive-view {
  position:absolute;
  inset:0 9% 0 23%;
  z-index:7;
  padding:clamp(16px,2vw,32px);
  contain:paint;
  overflow:auto;
  color:#e5e6df;
  background:
    radial-gradient(circle at 82% 8%,rgba(18,61,255,.16),transparent 29%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    #080b09;
  background-size:auto,24px 24px,24px 24px,auto;
}

.crt-screen.archive-is-open .desktop > .os-window:not(.project-detail) { display:none; }

.archive-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(18px,3vw,48px);
  align-items:end;
  margin-bottom:clamp(14px,2vh,24px);
  padding-bottom:clamp(12px,1.4vw,20px);
  border-bottom:1px solid rgba(229,230,223,.38);
}
.archive-heading-group { min-width:0; }
.archive-eyebrow { display:flex; justify-content:space-between; gap:24px; max-width:58rem; color:var(--terminal); font-size:.76em; letter-spacing:.06em; }
.archive-header h2 { margin:.12em 0 0; font:900 clamp(30px,4.3vw,68px)/.82 Arial Black,Arial,sans-serif; letter-spacing:-.065em; text-wrap:balance; }
.archive-header p { max-width:56ch; margin:clamp(9px,1.2vw,16px) 0 0; color:#aeb2aa; line-height:1.5; text-wrap:pretty; }
.archive-return { display:flex; align-items:center; gap:9px; min-height:31px; padding:6px 12px; border:1px solid #8d8f87; color:#e7e8e1; background:rgba(8,11,9,.76); box-shadow:inset 1px 1px rgba(255,255,255,.16); white-space:nowrap; }
.archive-return:active { transform:translateY(1px); }

.archive-toolbar { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; padding:7px 8px; color:#111; background:#bab8ae; border:1px solid #e8e6dd; box-shadow:inset -1px -1px #5d5d56; }
.archive-filters { display:flex; flex-wrap:wrap; gap:2px; }
.archive-filters button { min-height:24px; padding:3px 9px; border:1px solid transparent; color:#1a1b18; background:transparent; font-size:.78em; }
.archive-filters button[aria-pressed="true"] { color:#fff; background:var(--blue); border-color:#07196f; box-shadow:inset 1px 1px #728aff; }
.archive-filters button:focus-visible { outline:2px solid #111; outline-offset:-3px; }
#archive-filter-status { margin:0; color:#35362f; font-size:.72em; white-space:nowrap; font-variant-numeric:tabular-nums; }

.project-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-flow:dense; grid-auto-rows:minmax(132px,19vh); gap:7px; }
.project-card { position:relative; isolation:isolate; overflow:hidden; display:block; min-width:0; padding:0; border:1px solid #5a5a54; color:#f0f1eb; background:#101410; text-align:left; cursor:pointer; transition:border-color 150ms cubic-bezier(.23,1,.32,1),filter 150ms cubic-bezier(.23,1,.32,1),transform 150ms cubic-bezier(.23,1,.32,1); }
.project-card:nth-child(1) { grid-column:span 7; grid-row:span 2; }
.project-card:nth-child(2),
.project-card:nth-child(3) { grid-column:span 5; }
.project-card:nth-child(4) { grid-column:span 12; }
.project-card.is-filtered-out { display:none; }
.project-number { position:absolute; z-index:5; top:9px; left:10px; display:grid; place-items:center; min-width:27px; height:20px; padding:0 5px; color:#0c0e0b; background:var(--terminal); font-weight:700; font-variant-numeric:tabular-nums; box-shadow:2px 2px 0 rgba(0,0,0,.28); }
.project-card-visual { position:absolute; z-index:1; inset:0; display:block; overflow:hidden; }
.project-card-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02) 32%,rgba(2,4,3,.9) 100%); }
.project-card-copy { position:absolute; z-index:4; right:0; bottom:0; left:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:3px 12px; padding:clamp(10px,1.1vw,16px); }
.project-card-copy small { grid-column:1/-1; color:#aeb7ad; font-size:.72em; letter-spacing:.04em; }
.project-card-copy strong { min-width:0; font:900 clamp(14px,1.4vw,22px)/.94 Arial Black,Arial,sans-serif; letter-spacing:-.04em; text-wrap:balance; }
.project-card-copy em { grid-column:1/-1; max-width:48ch; margin-top:3px; color:#c7cbc3; font-size:.78em; font-style:normal; line-height:1.42; text-wrap:pretty; }
.project-card-copy b { align-self:center; color:#f0f1eb; font-size:.7em; font-weight:400; white-space:nowrap; opacity:.66; transform:translateX(-3px); transition:opacity 150ms cubic-bezier(.23,1,.32,1),transform 150ms cubic-bezier(.23,1,.32,1); }
.project-card:focus-visible { border-color:#fff; outline:2px solid var(--blue-hot); outline-offset:-4px; }
.project-card.is-current-project { border-color:var(--blue-hot); box-shadow:inset 0 0 0 2px var(--blue); }
.project-card:focus-visible .project-card-copy b { opacity:1; transform:none; }
.project-card:active { transform:scale(.99); }

.project-photo .project-card-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.64) contrast(1.12) brightness(.73); transition:transform 420ms cubic-bezier(.23,1,.32,1),filter 180ms cubic-bezier(.23,1,.32,1); }
.bini-signal-card .project-card-visual img { object-position:center 52%; }
.cinema-card .project-card-visual img { object-position:center 58%; }
.pal-card .project-card-visual img { object-position:center 52%; }
.bini-signal-card { background:#070a08; }
.cinema-card { background:#090c0a; }
.cinema-frame { position:absolute; inset:13% 9% 16%; border:3px solid #eef0e8; background:linear-gradient(164deg,rgba(18,61,255,.88) 0 47%,rgba(238,240,232,.94) 47.5% 52%,#151914 52.5%); box-shadow:9px 9px 0 rgba(18,61,255,.54); transform:rotate(-2.5deg); }
.cinema-frame::before { content:"HOUSE RULES"; position:absolute; inset:18% 8%; display:grid; place-items:center; color:#eef0e8; font:900 clamp(1.5em,3.2vw,3.2em)/.82 Arial Black,Arial,sans-serif; letter-spacing:-.065em; text-align:center; }
.cinema-frame::after { content:""; position:absolute; inset:-3px; border-block:8px dotted #090c0a; opacity:.72; }
.pal-card { background:#0a1021; }
.pal-soft-art { position:absolute; inset:12% 9% 18%; border:3px solid #eef0e8; background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(238,240,232,.22) 10px 12px),repeating-linear-gradient(-45deg,transparent 0 9px,rgba(18,61,255,.3) 10px 12px),linear-gradient(155deg,#eef0e8 0 28%,var(--blue) 28.5% 68%,#131a2e 68.5%); box-shadow:9px 9px 0 rgba(18,61,255,.48); transform:rotate(-2.5deg); }
.pal-soft-art::before { content:"HABI / SOFT PRODUCTS"; position:absolute; inset:18% 8%; display:grid; place-items:center; color:#eef0e8; font:900 clamp(1.3em,2.7vw,2.8em)/.82 Arial Black,Arial,sans-serif; letter-spacing:-.055em; text-align:center; text-shadow:2px 2px #0a1021; }
.pal-soft-art::after { content:"PAL / INFLIGHT"; position:absolute; right:7%; bottom:7%; padding:3px 6px; color:#0a1021; background:#eef0e8; font-size:.64em; font-style:normal; letter-spacing:.06em; }
.soon-card { background:#090b09; }
.soon-card .project-card-visual > i { position:absolute; inset:0; display:grid; place-items:center; color:var(--blue); font:900 7em/1 Arial,sans-serif; font-style:normal; opacity:.72; }

.os-window.project-detail { z-index:90; width:min(48rem,66%); height:92%; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.os-window.project-detail.is-closed,
.os-window.project-detail.is-minimized { display:none; }
.project-detail-content { min-height:0; padding:0; display:grid; grid-template-rows:minmax(170px,1.02fr) minmax(225px,.98fr); overflow:hidden; background:var(--paper); }
.detail-visual { position:relative; isolation:isolate; min-height:0; overflow:hidden; border-bottom:1px solid #111; background:var(--blue); }
.detail-visual img { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.08); }
.detail-visual.theme-cinema img { object-position:center 58%; }
.detail-visual.theme-pal img { object-position:center 46%; }
.detail-visual::before { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(3,5,4,.58)); pointer-events:none; }
.detail-visual-grid { position:absolute; z-index:3; inset:0; opacity:.26; background:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:9% 16%; pointer-events:none; }
.detail-visual-labels { position:absolute; z-index:4; right:12px; bottom:10px; left:12px; display:flex; justify-content:space-between; gap:20px; color:#fff; font-size:.7em; text-shadow:1px 1px #000; }

.detail-document { min-height:0; overflow:auto; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(150px,.65fr); gap:clamp(10px,1.25vw,18px) clamp(18px,2vw,32px); padding:clamp(13px,1.5vw,22px); background:linear-gradient(90deg,rgba(18,61,255,.055),transparent 38%),var(--paper); }
.detail-heading { min-width:0; }
.detail-heading p { margin:0; }
.detail-heading #project-index { color:#55584f; font-size:.72em; letter-spacing:.06em; }
.detail-heading #project-kicker { margin-top:6px; color:var(--blue); font-size:.76em; font-weight:700; }
.detail-heading h2 { max-width:12ch; margin:.16em 0 .3em; font:900 clamp(25px,3vw,48px)/.82 Arial Black,Arial,sans-serif; letter-spacing:-.065em; text-wrap:balance; }
.detail-heading #project-description { max-width:58ch; color:#31332d; line-height:1.48; text-wrap:pretty; }
.detail-meta { align-self:start; margin:0; border-top:2px solid #151612; }
.detail-meta div { display:grid; grid-template-columns:minmax(58px,.6fr) 1fr; gap:10px; padding:7px 0; border-bottom:1px solid #77786f; }
.detail-meta dt { color:#55574f; font-size:.68em; }
.detail-meta dd { margin:0; font-size:.74em; font-weight:700; text-align:right; overflow-wrap:anywhere; }
.detail-story { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,32px); padding-top:10px; border-top:1px solid #74756d; }
.detail-story section { display:grid; grid-template-columns:80px 1fr; gap:10px; align-items:start; }
.detail-story span { color:var(--blue); font-size:.68em; }
.detail-story p { margin:0; color:#363832; font-size:.8em; line-height:1.45; text-wrap:pretty; }
#project-credits { white-space:pre-line; }
.detail-navigation { grid-column:1/-1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding-top:10px; border-top:1px solid #74756d; }
.detail-navigation button { min-width:0; min-height:31px; border:0; color:#171813; background:transparent; }
.detail-navigation button:first-child { display:grid; grid-template-columns:auto 1fr; column-gap:8px; justify-items:start; text-align:left; }
.detail-navigation button:last-child { display:grid; grid-template-columns:1fr auto; column-gap:8px; justify-items:end; text-align:right; }
.detail-navigation button > span { grid-row:1/3; align-self:center; color:var(--blue); font-size:1.5em; }
.detail-navigation small { color:#5b5d55; font-size:.63em; }
.detail-navigation strong { overflow:hidden; max-width:17ch; font-size:.76em; text-overflow:ellipsis; white-space:nowrap; }
.detail-navigation .detail-back { padding:6px 12px; border:1px solid #24251f; background:#b4b2a8; box-shadow:inset 1px 1px #eeece4,inset -1px -1px #66675f; font-size:.72em; white-space:nowrap; }
.detail-navigation button:active { transform:translateY(1px); }
.detail-navigation button:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }

.detail-visual.theme-cinema { color:#eef0e8; background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(238,240,232,.08) 45px 47px),linear-gradient(164deg,#090c0a 0 42%,var(--blue) 42.4% 74%,#d9dbd3 74.4%); }
.detail-visual.theme-pal { color:#eef0e8; background:repeating-linear-gradient(45deg,transparent 0 22px,rgba(238,240,232,.1) 23px 26px),repeating-linear-gradient(-45deg,transparent 0 22px,rgba(18,61,255,.22) 23px 26px),linear-gradient(155deg,#d9dbd3 0 30%,var(--blue) 30.4% 69%,#0a1021 69.4%); }
.detail-visual.theme-bini { color:#f0f1eb; background:#070a08 repeating-linear-gradient(90deg,transparent 0 38px,rgba(18,61,255,.42) 39px 45px,transparent 46px 78px); }
.detail-visual.theme-bini img { object-position:center 52%; }
.detail-visual.theme-bini::after { content:"BINI"; position:absolute; z-index:1; inset:-32% 18%; display:grid; place-items:center; border:8px solid #f0f1eb; border-radius:50%; color:#f0f1eb; box-shadow:0 0 0 26px rgba(18,61,255,.75),0 0 0 34px rgba(240,241,235,.78),0 0 0 74px rgba(18,61,255,.4); font:900 clamp(4em,11vw,9em)/1 Arial Black,Arial,sans-serif; letter-spacing:-.08em; transform:rotate(-9deg); }
.detail-visual.theme-cinema::after { content:"HOUSE RULES"; position:absolute; z-index:1; inset:15% 12%; display:grid; place-items:center; border:clamp(4px,.7vw,8px) solid #eef0e8; color:#eef0e8; background:rgba(9,12,10,.48); box-shadow:clamp(10px,1.5vw,22px) clamp(10px,1.5vw,22px) 0 rgba(9,12,10,.72); font:900 clamp(2.5em,8vw,7em)/.78 Arial Black,Arial,sans-serif; letter-spacing:-.075em; text-align:center; transform:rotate(-2deg); }
.detail-visual.theme-pal::after { content:"PAL SOFT PRODUCTS"; position:absolute; z-index:1; inset:15% 12%; display:grid; place-items:center; border:clamp(4px,.7vw,8px) solid #eef0e8; color:#eef0e8; background:rgba(10,16,33,.42); box-shadow:clamp(10px,1.5vw,22px) clamp(10px,1.5vw,22px) 0 rgba(10,16,33,.72); font:900 clamp(2.3em,7.2vw,6.6em)/.78 Arial Black,Arial,sans-serif; letter-spacing:-.075em; text-align:center; transform:rotate(-2deg); }
.detail-visual.has-project-image::after { display:none; }
.detail-visual.theme-soon { background:#090b09; color:var(--blue); }
.detail-visual.theme-soon::after { content:"..."; position:absolute; z-index:1; inset:0; display:grid; place-items:center; font:900 10em/.3 Arial Black,sans-serif; transform:translateY(-10%); }

@media (hover:hover) and (pointer:fine) {
  .archive-return:hover { color:#fff; background:var(--blue); border-color:#8fa1ff; }
  .archive-filters button:hover:not([aria-pressed="true"]) { background:#d8d6cc; border-color:#77776f; }
  .project-card:hover { z-index:2; border-color:#fff; filter:brightness(1.08); transform:translateY(-2px); }
  .project-card:hover .project-card-copy b { opacity:1; transform:none; }
  .project-photo:hover .project-card-visual img { filter:saturate(.82) contrast(1.08) brightness(.83); transform:scale(1.025); }
  .detail-navigation button:not(.detail-back):hover { color:var(--blue); }
  .detail-navigation .detail-back:hover { color:#fff; background:var(--blue); }
}