/* ==========================================================================
   OSG BRUTALISM — components
   Each block names the research archetype it comes from (see references/).
   Requires tokens.css.
   ========================================================================== */

/* ---------- 1. Corner nav — fixed to 4 corners (archive: 1095 Drexler, 1097 kisskissbangbang; live-verified: 34 Adam Clarke, 16 DAPP BOI) ---------- */
.corner { position: fixed; z-index: 100; padding: var(--s2) var(--gutter); font-size: var(--fs-base); line-height: 32px; mix-blend-mode: difference; color: #fff; white-space: nowrap; } /* 8 + 32 + 8 = --corner-h */
.corner a { display: inline-block; color: inherit; text-decoration: none; padding-inline: var(--s2); } /* a 32px-tall target, not just the glyphs */
.corner--tr a + a, .corner--br a + a { margin-left: var(--s2); }
.corner--tr, .corner--br { padding-right: calc(var(--gutter) - var(--s2)); }
.corner--tl a { display: block; padding-inline: 0; }
.corner a:hover { background: #fff; color: #000; }
.corner--tl { top: 0; left: 0; } .corner--tr { top: 0; right: 0; text-align: right; }
.corner--bl { bottom: 0; left: 0; } .corner--br { bottom: 0; right: 0; text-align: right; }

/* ---------- 2. Poster hero — giant type fills the viewport (archetype B) ---------- */
.poster { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--gutter) + 2em) var(--gutter); overflow: hidden; } /* 2em clears the fixed corners */
.poster__word { font-size: var(--fs-mega); line-height: var(--lh-tight); font-weight: var(--w-bold); font-stretch: var(--wd-condensed); white-space: nowrap; }
[data-fit] { white-space: nowrap; line-height: var(--lh-tight); } /* sized by components.js */
.poster__sub { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--fs-meta); border-top: var(--rule); padding-top: var(--s2); margin-top: var(--s3); }

/* ---------- 3. Ticker / marquee (16 DAPP BOI, 897 UX Lausanne, 525 20K) ---------- */
.ticker { overflow: hidden; white-space: nowrap; border-block: var(--rule); padding-block: var(--s1); }
.ticker__track { display: inline-block; padding-left: 100%; animation: osg-ticker var(--t-ticker) infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes osg-ticker { to { transform: translateX(-100%); } }

/* ---------- 4. Index table — the work list (archetype C; 690 Kiepe, 1549 HIT, 1112 Still Here) ---------- */
.index { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.index th { text-align: left; font-weight: var(--w-regular); font-size: var(--fs-meta); padding: var(--s2) var(--s2) var(--s1); border-bottom: var(--rule); position: sticky; top: var(--corner-h); background: var(--paper); }
.index td { padding: var(--s2); border-bottom: var(--rule); vertical-align: top; }
.index tbody tr { cursor: crosshair; }
.index tbody tr:hover { background: var(--ink); color: var(--paper); }
.index tbody tr:hover a { color: inherit; }
.index .num { font-variant-numeric: tabular-nums; width: 4ch; }
.index a { color: inherit; text-decoration: none; }
.index .u-mark { white-space: nowrap; }
@media (max-width: 700px) { .index .col-opt { display: none; } } /* narrow: drop optional columns, never scroll sideways */
/* hover-preview image that follows cursor (body:not(.mobile) .hover-title:hover + .hover-image — seen in hover rules) */
.peek { position: fixed; pointer-events: none; width: 28vw; max-width: 420px; z-index: 90; display: none; }
.peek.is-on { display: block; }

/* ---------- 5. Exposed grid — ruled boxes (archetype D; 899 Istanbul Biennial, 516 ZK/U, 1196 Harpe 45) ---------- */
.ruled { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: var(--rule); border-left: var(--rule); }
.ruled > * { border-right: var(--rule); border-bottom: var(--rule); padding: var(--s3); min-height: 8rem; }
.ruled > a { color: inherit; text-decoration: none; }
.ruled > a:hover { background: var(--flood); color: var(--on-flood); }
@media (max-width: 700px) { .ruled { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* mobile: 2 columns, rules kept — wins over a page-set --cols; minmax(0) keeps big content (logos, images) from widening a cell */

/* ---------- 6. Buttons — text in a box; hover = invert, no easing ---------- */
.btn { display: inline-block; font: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--paper); border: var(--rule); padding: var(--s2) var(--s3); cursor: pointer; text-decoration: none; line-height: 1; }
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }
.btn:active { background: var(--signal); color: var(--paper); border-color: var(--signal); }
.btn--flood { background: var(--flood); color: var(--on-flood); border-color: var(--flood); }
.btn--flood:hover { background: var(--ink); border-color: var(--ink); }
.btn--bare { border: 0; padding: 0; background: none; text-decoration: underline; color: var(--link); }
.btn--bare:hover { background: var(--ink); color: var(--paper); text-decoration: none; }

/* ---------- 7. Filters — bracketed text toggles (1549 HIT, 170 Mei Lenehan, 1161 subjective encyclopedia) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--fs-meta); }
.filter { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.filter::before { content: "[ "; } .filter::after { content: " ]"; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filter:hover { color: var(--link); }

/* ---------- 8. Meta list — label / value pairs for project facts ---------- */
.meta { display: grid; grid-template-columns: max-content 1fr; gap: 0 var(--s4); font-size: var(--fs-meta); }
.meta dt { color: var(--gray-3); } .meta dd { margin: 0; }

/* ---------- 9. Image stack — project body: big images, small captions, no cards ---------- */
.stack { display: grid; gap: var(--s2); }
.stack figure { display: grid; gap: var(--s1); }
.stack figcaption { font-size: var(--fs-meta); }
.stack figure { width: min(100%, calc(var(--img-max-h) * var(--ar, 10))); } /* one image = one screen, never cropped (02_SYSTEM §9). --ar = w/h, set inline per figure; the height cap beats the width ratios below */
.stack img, .stack video { max-height: var(--img-max-h); object-fit: contain; object-position: left top; } /* safety net when --ar is missing */
.stack--offset figure:nth-child(odd) { width: min(62%, calc(var(--img-max-h) * var(--ar, 10))); }
.stack--offset figure:nth-child(even) { width: min(48%, calc(var(--img-max-h) * var(--ar, 10))); margin-left: auto; }

/* ---------- 10. Form — raw inputs, visible borders (671 730DC, 740 PDPA) ---------- */
.field { display: grid; gap: var(--s1); font-size: var(--fs-meta); }
.input { font: inherit; font-size: var(--fs-base); border: 0; border-bottom: var(--rule); padding: var(--s2) 0; background: transparent; color: inherit; width: 100%; }
.input:focus { outline: 0; background: var(--gray-1); }
.input::placeholder { color: var(--gray-3); }

/* ---------- 11. Product row — shop of real AND virtual goods ---------- */
.product { display: grid; grid-template-columns: 1fr; border: var(--rule); color: inherit; text-decoration: none; }
.ruled > .product { padding: 0; border: 0; border-right: var(--rule); border-bottom: var(--rule); }
.product__img img { width: 100%; height: 100%; object-fit: contain; }
.product__img { aspect-ratio: 1; background: var(--gray-1); display: grid; place-items: center; overflow: hidden; border-bottom: var(--rule); }
.product__row { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s2); font-size: var(--fs-meta); }
.product__state { padding: 0 var(--s1); border: var(--rule); }
.product__state--virtual { background: var(--flood); color: var(--on-flood); border-color: var(--flood); }
.product__state--sold { background: var(--signal); color: var(--paper); border-color: var(--signal); }

/* ---------- 12. Live readout — clock / counters (1055 PAL, 1163 Surveillance Index, 1112 Still Here) ---------- */
.readout { font-variant-numeric: tabular-nums; font-stretch: var(--wd-condensed); }

/* ---------- 13. Footer — plain text, everything visible, no icons ---------- */
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s4); padding: var(--gutter); border-top: var(--rule); font-size: var(--fs-meta); }

/* ---------- 15. Stage — the home poster: one ink screen. "Many Things Make One": a strip of every image above one wordmark ---------- */
.stage { --wm-h: 19.5vw; /* room for the tallest specimen state, so nothing above ever moves */
  --strip-h: min(calc(100svh - 2 * var(--corner-h) - var(--wm-h) - 6 * var(--s5)), 48vw); /* 48vw: a 16:9 image still fits the screen whole */
  height: 100svh; min-height: 520px; display: grid; grid-template-rows: var(--corner-h) minmax(0, 1fr) auto var(--wm-h) var(--corner-h);
  background: var(--ink); color: var(--paper); overflow: hidden; }
.stage a { color: inherit; }
.stage > .strip { grid-row: 2; align-self: center; }
.stage__read { grid-row: 3; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s4); margin-inline: var(--gutter); padding-block: var(--s2); border-top: 1px solid currentColor; font-size: var(--fs-meta); line-height: 1.2; }
.stage__read > :last-child { text-align: right; }
.stage__word { grid-row: 4; position: relative; margin-inline: var(--gutter); cursor: crosshair; user-select: none; }
.stage__one, .stage__two { position: absolute; inset: auto 0 0 0; }
.stage__two { display: none; }
.stage__base { grid-row: 5; align-self: center; text-align: center; font-size: var(--fs-meta); }
@media (max-width: 700px) {
  .stage { --wm-h: 64vw; height: auto; min-height: 0; grid-template-rows: var(--corner-h) auto auto var(--wm-h) var(--corner-h); row-gap: var(--s4); } /* the strip is short here: no dead space around it */
  .stage__one { display: none; } .stage__two { display: block; }
  .stage__read { grid-template-columns: 1fr auto; } .stage__read > :last-child { display: none; }
  .stage__base { display: none; } /* the bottom corners need the whole bar */
}

/* ---------- 16. Strip — every image in one slow row (ticker motion; pauses on hover). items carry --ar = w/h ---------- */
.strip { --strip-h: 40svh; overflow: hidden; }
.stage > .strip { --strip-h: inherit; }
.strip__track { display: flex; width: max-content; padding-left: var(--gutter); animation: osg-strip 150s linear infinite; }
.strip:hover .strip__track, .strip:focus-within .strip__track { animation-play-state: paused; }
@keyframes osg-strip { to { transform: translateX(calc(-50% + var(--gutter) / 2)); } } /* the track holds the items twice: half of it, minus the lead-in gutter */
.strip__item { flex: none; display: grid; gap: var(--s2); margin-right: var(--s2); color: inherit; text-decoration: none; }
.strip__item img, .strip__item video { height: var(--strip-h); width: calc(var(--strip-h) * var(--ar)); max-width: none; font-size: var(--fs-meta); }
.strip__cap { font-size: var(--fs-meta); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--strip-h) * var(--ar)); }
.stage a.strip__item:hover { background: var(--paper); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .strip { overflow-x: auto; } }

/* ---------- 17. Section — one rule, one numbered head, a 12-column measure (02_SYSTEM §4) ---------- */
.sec { display: grid; gap: var(--s6); padding-top: var(--s8); }
.cols, .sec__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.sec__head { border-top: var(--rule); padding-top: var(--s2); font-size: var(--fs-meta); line-height: 1.2; text-transform: uppercase; }
.sec__head > :nth-child(2) { grid-column: 2 / span 8; }
.sec__head > :last-child { grid-column: span 3; text-align: right; }
@media (max-width: 700px) {
  .sec { padding-top: var(--s7); }
  .sec__head { grid-template-columns: auto 1fr auto; } .sec__head > :nth-child(2), .sec__head > :last-child { grid-column: auto; }
  .cols { grid-template-columns: minmax(0, 1fr); } .cols > * { grid-column: auto !important; text-align: left; } /* narrow: one column, whatever the page asked for */
}

/* ---------- 18. Plate — a row of images justified to the full measure at one height. row: --sum (Σ w/h), --n; img: --ar ---------- */
.plate { display: grid; gap: var(--s3); container-type: inline-size; }
.plate__row { --h: min(var(--plate-max-h), calc((100cqw - (var(--n) - 1) * var(--s2)) / var(--sum))); display: flex; gap: var(--s2); text-decoration: none; }
.plate__row img, .plate__row video { height: var(--h); width: calc(var(--h) * var(--ar)); max-width: none; }
@media (max-width: 700px) { .plate__row { flex-direction: column; } .plate__row img, .plate__row video { height: auto; width: min(100%, calc(var(--plate-max-h) * var(--ar))); } }

/* ---------- 19. Body text — only when the content file has a body the user wrote (02_SYSTEM §9). shares the images' left edge ---------- */
.column__text { display: grid; gap: var(--s4); max-width: 60ch; margin-block: var(--s6); line-height: var(--lh-read); }
.plate__rows { display: grid; gap: var(--s2); container-type: inline-size; } /* a work's images, row after row */

/* ==========================================================================
   ZONE: PRE-AERO — OS 문법 "변주" (이스터에그). About / 404 전용.
   원칙: 같은 사이트, 같은 분위기. OS의 *색·서체*는 가져오지 않고 *문법*만 빌린다
   (타이틀바, _ □ ×, 메뉴줄, 상태줄, 베벨 버튼, 드래그, 모래시계 커서, 부팅 화면).
   모든 색 = 토큰(ink/paper/flood), 모든 글자 = OSG Capsules, 반경 0.
   zone 안에서만 추가 허용: 블러 0 + ink 색의 하드 오프셋 그림자, 이미지 커서, 드래그.
   금지: #C0C0C0 회색 면, #000080 남색 바, #008080 청록 바탕, C64 파랑, 시스템 폰트,
         화면 전체를 데스크톱처럼 꾸미기, 그리고 당연히 Aero/글로시/반투명.
   ========================================================================== */
.zone-preaero {
  --win-shadow: 3px 3px 0 var(--ink);            /* Mac OS 9 식 하드 그림자, 단색 */
  --cur-wait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h14v2h-1v3l-4 4v2l4 4v3h1v2H1v-2h1v-3l4-4v-2L2 6V3H1z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E") 8 11, wait;
}
.zone-preaero.is-busy, .zone-preaero .is-busy { cursor: var(--cur-wait); }

/* 창 — 콘텐츠 블록 하나에 OS 창의 '문법'만 입힌다 */
.win { position: relative; background: var(--paper); color: var(--ink); border: var(--rule); box-shadow: var(--win-shadow); width: min(480px, 100%); }
.win__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 2px 2px 2px var(--s2);
  background: var(--ink); color: var(--paper); font-size: var(--fs-meta); line-height: 1.2; cursor: move; user-select: none; touch-action: none; }
.win:not(.is-active) .win__bar { background: var(--paper); color: var(--ink); border-bottom: var(--rule); }
.win__ctrls { display: flex; gap: 2px; }
.win__ctrl { width: 16px; height: 14px; padding: 0; display: grid; place-items: center; font: inherit; font-size: 10px; line-height: 1;
  background: var(--paper); color: var(--ink); border: var(--rule); cursor: pointer; }
.win__ctrl:hover { background: var(--flood); color: var(--on-flood); }
.win__menu { display: flex; gap: var(--s4); padding: 2px var(--s2); border-bottom: var(--rule); font-size: var(--fs-meta); }
.win__menu u { text-decoration: underline; text-underline-offset: 1px; }
.win__body { padding: var(--s3); }
.win__status { display: flex; border-top: var(--rule); font-size: var(--fs-meta); }
.win__status > * { flex: 1; padding: 1px var(--s2); }
.win__status > * + * { border-left: var(--rule); }
.win.is-min .win__body, .win.is-min .win__menu, .win.is-min .win__status { display: none; }

/* 베벨 버튼 — Win95 입체감을 ink 한 색의 안쪽 선으로만 */
.zone-preaero .btn--bevel { box-shadow: inset -2px -2px 0 var(--ink); }
.zone-preaero .btn--bevel:hover { background: var(--paper); color: var(--ink); }
.zone-preaero .btn--bevel:active { box-shadow: inset 2px 2px 0 var(--ink); background: var(--paper); color: var(--ink); border-color: var(--ink); padding: calc(var(--s2) + 1px) calc(var(--s3) - 1px) calc(var(--s2) - 1px) calc(var(--s3) + 1px); }

/* 부팅 화면 이스터에그 — 키 입력으로 잠깐 나타남 (components.js: 'osg' 타이핑 또는 ↑↑↓↓←→←→BA) */
.boot { position: fixed; inset: 0; z-index: 1000; display: none; padding: var(--s6) var(--gutter); background: var(--flood); color: var(--on-flood);
  font-family: var(--font); font-size: var(--fs-base); line-height: 1.3; text-transform: uppercase; white-space: pre-wrap; margin: 0; cursor: none; }
.boot.is-on { display: block; }

/* ---------- Utilities — LAST so they always win over component defaults ---------- */
.u-condensed { font-stretch: var(--wd-condensed); }
.u-expanded  { font-stretch: var(--wd-expanded); }
.u-thin { font-weight: var(--w-thin); } .u-light { font-weight: var(--w-light); } .u-bold { font-weight: var(--w-bold); }
.u-italic { font-style: italic; }
.u-meta { font-size: var(--fs-meta); line-height: 1.2; }
.u-upper { text-transform: uppercase; }
.u-invert { background: var(--ink); color: var(--paper); }
.u-flood { background: var(--flood); color: var(--on-flood); }
.u-mark { background: var(--flood); color: var(--on-flood); padding-inline: 0.15em; } /* highlighter: small flood behind text (NOW, ongoing). not a page extreme */
.u-signal { color: var(--signal); }
.u-rule-b { border-bottom: var(--rule); } .u-rule-t { border-top: var(--rule); }
.u-pad { padding: var(--gutter); }
.u-blink { animation: osg-blink var(--t-blink) infinite; }
@keyframes osg-blink { to { visibility: hidden; } }

/* ---------- 14. Logo & wordmark — 02_SYSTEM §2-1. one color = currentColor, never the file's own color ---------- */
.logo { display: inline-block; vertical-align: middle; height: var(--logo-h, 24px); max-width: 100%; background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.logo--mark { aspect-ratio: 1085 / 259; -webkit-mask-image: url("assets/logo/osg-mark.svg"); mask-image: url("assets/logo/osg-mark.svg"); }          /* priority 1. min 24px tall */
.logo--ofstgrnd { aspect-ratio: 640 / 630; -webkit-mask-image: url("assets/logo/osg-ofstgrnd.svg"); mask-image: url("assets/logo/osg-ofstgrnd.svg"); } /* priority 2. min 120px tall */
.logo--blocks { aspect-ratio: 350 / 240; -webkit-mask-image: url("assets/logo/osg-blocks.svg"); mask-image: url("assets/logo/osg-blocks.svg"); }       /* priority 3. min 16px tall */
.corner--tl .logo { display: block; margin-block: 4px; }
.corner--tl a:hover .logo { background: #000; } /* corner hover flips to white box; keep the mark visible */
.wordmark { font-weight: var(--w-light); font-stretch: var(--wd-condensed); font-style: normal; letter-spacing: var(--ls-none); white-space: nowrap; line-height: var(--lh-tight); } /* OFFSETGROUND. >= 40px only */