/* style.css — yourweb3d 디자인 토큰·컴포넌트 단일 출처 (BOM 없는 UTF-8)
   DESIGN.md와 1:1 — 값 변경은 DESIGN.md 먼저. 확정 방향: E2 "표지와 등기부"(2026-06-11).
   색의 소유권 규칙: 크롬=흑백 mono / 컬러=유저 썸네일 전유 / 애시드=등기 스탬프 전용. */

:root{
  /* 색 (DESIGN §1) */
  --bg:#ffffff;
  --ink:#0d0d0d;
  --mute:#757575;        /* AA 4.6:1 — 시안 #8b8b8b에서 정정 */
  --hair:#e4e4e4;
  --faint:#f1f1f1;
  --bar-src:#c7c7c7;
  --acid:#CFFF00;        /* 스탬프 전용 — 백지 위 애시드 텍스트 금지 */

  /* 활자 (DESIGN §2) — CJK 폴백: ja/ko 문장은 Noto Sans(임시 Google Fonts, §5에서 subset) */
  --sans:'Archivo','Helvetica Neue',Arial,'Noto Sans KR','Noto Sans JP',sans-serif;
  --display:'Archivo Black',var(--sans);
  --mono:'Space Mono',ui-monospace,'Noto Sans KR','Noto Sans JP',monospace;

  --fs-micro:9.5px;
  --fs-meta:11px;
  --fs-body:13.5px;
  --fs-ui:15px;
  --fs-who-big:19px;
  --fs-wm:17px;
  --fs-cover:clamp(46px,9.6vw,150px);

  /* 공간·괘선 (DESIGN §3) */
  --gut:clamp(20px,4vw,60px);
  --cell-pad:18px;
  --cover-indent:clamp(24px,8vw,140px);
}

/* ── base ─────────────────────────────────── */
*{ box-sizing:border-box; margin:0; }
body{ background:var(--bg); color:var(--ink);
      font:400 var(--fs-ui)/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img{ height:auto; }                                  /* CLS 가드 — width/height 속성과 병용 필수 */
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }

/* ── header: 시스템 보이스 ────────────────── */
.site-header{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 24px;
              padding:18px var(--gut); }
.wordmark{ font-family:var(--display); font-size:var(--fs-wm); letter-spacing:.02em; text-transform:uppercase; }
.wordmark .your{ font-family:var(--sans); font-weight:500; }
.wordmark .arrow{ font-family:var(--mono); font-weight:700; margin:0 2px; }
.wordmark .tick{ background:var(--ink); color:var(--acid); padding:1px 5px 2px; margin-left:10px;
                 font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; vertical-align:3px; }
.site-nav{ display:flex; flex-wrap:wrap; gap:6px 26px; font-family:var(--mono); font-size:var(--fs-meta);
           letter-spacing:.12em; text-transform:uppercase; }
.site-nav a{ border-bottom:1px solid transparent; transition:border-color .2s; }
.site-nav a:hover{ border-color:var(--ink); }

/* ── cover ────────────────────────────────── */
.cover{ border-top:1px solid var(--ink); padding:clamp(40px,7vh,84px) var(--gut) 0; }
.cover h1{ font-family:var(--display); text-transform:uppercase;
           font-size:var(--fs-cover); line-height:.94; letter-spacing:-.015em; }
.cover h1 .ln{ display:block; }
.cover h1 .ln.indent{ padding-left:var(--cover-indent); }
.cover h1 mark{ background:var(--acid); color:inherit; padding:0 .08em; }
.cover h1 .gl{ font-family:var(--mono); font-weight:400; }

.creed{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:40px;
        border-top:1px solid var(--ink); border-bottom:1px solid var(--hair); }
.creed > div{ padding:20px 22px 22px 0; }
.creed > div + div{ padding-left:22px; border-left:1px solid var(--hair); }
.creed .k{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.16em;
           text-transform:uppercase; display:block; margin-bottom:8px; }
.creed .k i{ font-style:normal; color:var(--mute); margin-right:8px; }
.creed p{ font-size:var(--fs-body); line-height:1.55; }

.roll{ padding:16px 0 26px; font-family:var(--mono); font-size:var(--fs-meta); line-height:2.1;
       letter-spacing:.04em; color:var(--mute); text-transform:uppercase; }
.roll b{ color:var(--ink); font-weight:400; }
/* 롤 가명 = 클릭 필터(app.js — 피드로 스크롤 + 해당 가명만), 활성 = 애시드 스탬프 */
.roll b.ow{ cursor:pointer; border-bottom:1px solid transparent; transition:border-color .2s; }
.roll b.ow:hover{ border-color:var(--ink); }
.roll b.ow.on{ background:var(--acid); padding:1px 6px 2px; border-color:transparent; }
.roll .you{ background:var(--acid); color:var(--ink); padding:1px 6px 2px; font-weight:700; }

.cta{ display:inline-flex; align-items:baseline; gap:14px; margin:0 0 34px; font-family:var(--mono);
      font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
      background:var(--ink); color:#fff; padding:18px 24px;
      box-shadow:6px 6px 0 var(--acid); transition:transform .15s, box-shadow .15s; }
.cta .no{ color:var(--acid); }
.cta:hover{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--acid); }

.strip{ display:flex; border-top:1px solid var(--ink); margin:0 calc(var(--gut) * -1); }
.strip a{ flex:1; border-right:1px solid var(--ink); }
.strip a:last-child{ border-right:none; }
.strip img{ width:100%; aspect-ratio:1; object-fit:cover; display:block;
            filter:grayscale(1); transition:filter .35s; }
.strip a:hover img{ filter:grayscale(0); }

/* ── feedbar ──────────────────────────────── */
.feedbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 24px;
          padding:14px var(--gut); border-top:1px solid var(--ink); border-bottom:1px solid var(--hair);
          position:sticky; top:0; z-index:5; background:rgba(255,255,255,.97);
          font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; }
.feedbar .f{ display:flex; flex-wrap:wrap; gap:4px 24px; }
.feedbar .f span{ color:var(--mute); cursor:pointer; transition:color .2s; }
.feedbar .f span:hover{ color:var(--ink); }
.feedbar .f span.on{ color:var(--ink); background:var(--acid); padding:1px 7px 2px; }
.feedbar .n{ color:var(--mute); }
.feedbar .n b{ color:var(--ink); font-weight:400; }
/* v1.1 — 필터 결과 카운트 칩(app.js 생성, 표시 전용)·빈 결과 메시지(build.ps1 마크업) */
.feedbar .f .cnt{ color:var(--ink); cursor:default; }
.feedbar .f .cnt:hover{ color:var(--ink); }
.feed-empty{ border-bottom:1px solid var(--ink); padding:56px var(--gut); margin:0;
             font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em;
             text-transform:uppercase; color:var(--mute); }

/* ── feed: 등기 그리드 ────────────────────── */
.feed{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; gap:1px; background:var(--hair);
       border-bottom:1px solid var(--ink); }
.cell{ background:var(--bg); padding:var(--cell-pad) var(--cell-pad) 20px; display:flex; flex-direction:column;
       gap:13px; position:relative; transition:background .2s; }
.cell:hover{ background:#fcfcfc; }
.cell .ph{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.cell .ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.cell:hover .ph img{ transform:scale(1.035); }
.cell .chip{ position:absolute; top:0; left:0; background:var(--acid); color:var(--ink);
             font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; padding:4px 8px; }
.cell .who{ font-weight:600; font-size:var(--fs-ui); letter-spacing:.01em; }
.cell .who .t{ font-family:var(--mono); font-weight:400; font-size:10.5px; color:var(--mute);
               letter-spacing:.12em; text-transform:uppercase; margin-left:10px; }
/* 가명 = 클릭 필터(app.js) — 활성은 애시드 스탬프(피드바 .on과 동일 문법) */
.cell .who .ow{ cursor:pointer; border-bottom:1px solid transparent; transition:border-color .2s; }
.cell .who .ow:hover{ border-color:var(--ink); }
.cell .who .ow.on{ background:var(--acid); padding:0 5px 1px; border-color:transparent; }

/* 변환의 증거: 용량 비교 바 */
.tr{ font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); display:block; }
.tr b{ color:var(--ink); font-weight:400; }
.bars{ display:grid; grid-template-columns:34px 1fr; gap:3px 8px; align-items:center; margin-top:7px; }
.bars .lb{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; color:var(--mute); }
.bars .tk{ height:3px; background:var(--faint); position:relative; }
.bars .tk i{ position:absolute; inset:0 auto 0 0; display:block; }
.bars .tk.src i{ background:var(--bar-src); }
.bars .tk.out i{ background:var(--ink); }
.cell:hover .bars .tk.out i{ background:var(--acid); outline:1px solid var(--ink); }

.cell .foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:2px 16px; margin-top:auto;
             font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); }
.cell .foot b{ color:var(--ink); font-weight:400; }
.cell.big{ grid-column:span 2; grid-row:span 2; }
.cell.big .ph{ aspect-ratio:auto; flex:1; }
.cell.big .who{ font-size:var(--fs-who-big); }

/* 업로드 = 다음 채번 예약 */
.cell.next{ justify-content:space-between; gap:18px; }
.cell.next .chip-big{ align-self:flex-start; background:var(--acid); font-family:var(--mono);
                      font-size:24px; font-weight:700; letter-spacing:.04em; padding:8px 14px; }
.cell.next .txt{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.1em;
                 text-transform:uppercase; line-height:2; }
.cell.next .sub{ font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); line-height:1.9; }
.cell.next .go{ font-family:var(--mono); font-size:var(--fs-meta); font-weight:700; letter-spacing:.12em;
                text-transform:uppercase; border:1px solid var(--ink); padding:12px 16px; align-self:flex-start;
                transition:all .2s; }
.cell.next:hover{ background:#fdffe8; }
.cell.next:hover .go{ background:var(--ink); color:var(--acid); }

/* ── footer: 등기 콜로폰 ──────────────────── */
.site-footer{ padding:52px var(--gut); display:flex; justify-content:space-between; align-items:center;
              flex-wrap:wrap; gap:18px 40px;
              font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.site-footer .l span{ color:var(--mute); margin-left:20px; }
.site-footer .r a{ margin-left:24px; color:var(--mute); transition:color .2s; }
.site-footer .r a:hover{ color:var(--ink); }

/* ── detail: 등기부 한 장 (DESIGN §4 — F 확정 2026-06-11) ── */
.crumb{ padding:10px var(--gut); border-top:1px solid var(--ink); border-bottom:1px solid var(--hair);
        font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase;
        display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 24px; }
.crumb a{ color:var(--mute); transition:color .2s; }
.crumb a:hover{ color:var(--ink); }
.crumb .here{ color:var(--ink); }
.crumb .pos{ color:var(--mute); }
.crumb .pos b{ color:var(--ink); font-weight:400; }

.rec-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px 40px;
           padding:clamp(32px,5vh,56px) var(--gut) 28px; }
.rec-head .stamp{ display:inline-block; background:var(--acid); font-family:var(--mono);
                  font-size:clamp(22px,3vw,34px); font-weight:700; letter-spacing:.04em; padding:10px 18px; }
.rec-head .who{ font-family:var(--display); font-size:clamp(28px,4.6vw,56px); line-height:1.02;
                letter-spacing:-.015em; text-transform:uppercase; margin-top:18px;
                overflow-wrap:anywhere; } /* 긴 무공백 가명(architects&partners 실증, Phase 2 임의 입력 대비)의 협폭 flex min-content 돌파 방지 — DESIGN §6-1 */
.rec-head .who .t{ font-family:var(--mono); font-size:12px; font-weight:400; color:var(--mute);
                   letter-spacing:.14em; display:block; margin-top:12px; }
.rec-head .side{ font-family:var(--mono); font-size:var(--fs-meta); line-height:2.05; letter-spacing:.08em;
                 text-transform:uppercase; color:var(--mute); text-align:right; }
.rec-head .side b{ color:var(--ink); font-weight:400; }
.openfull{ display:inline-block; margin-top:10px; font-family:var(--mono); font-size:12px; font-weight:700;
           letter-spacing:.12em; text-transform:uppercase; background:var(--ink); color:#fff; padding:14px 20px;
           box-shadow:5px 5px 0 var(--acid); transition:transform .15s, box-shadow .15s; }
.openfull:hover{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--acid); }

.viewer{ margin:0 var(--gut); position:relative; border:1px solid var(--ink); background:var(--faint); }
.viewer iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; }
.viewer .live{ position:absolute; top:0; left:0; background:var(--acid); color:var(--ink);
               font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; padding:5px 10px; }
.viewer-cap{ margin:10px var(--gut) 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 24px;
             font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); letter-spacing:.04em;
             text-transform:uppercase; }
.viewer-cap b{ color:var(--ink); font-weight:400; }

.sheet{ margin:clamp(36px,6vh,64px) var(--gut) 0; border-top:1px solid var(--ink); }
.sheet h2{ font-family:var(--mono); font-size:var(--fs-meta); font-weight:700; letter-spacing:.16em;
           text-transform:uppercase; padding:14px 0; color:var(--mute); }
.sheet dl{ display:grid; grid-template-columns:200px 1fr; }
.sheet dt{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase;
           color:var(--mute); padding:14px 0; border-top:1px solid var(--hair); }
.sheet dd{ padding:13px 0 14px; border-top:1px solid var(--hair); font-size:var(--fs-ui); }
.sheet dd .m{ font-family:var(--mono); font-size:13px; }
.sheet dd .dim{ color:var(--mute); }
.sheet dd a.owlink{ border-bottom:1px solid var(--ink); transition:background .2s; }   /* UPLOADED BY → index ?owner= 필터 */
.sheet dd a.owlink:hover{ background:var(--acid); }
.chiplet{ background:var(--acid); font-family:var(--mono); font-size:var(--fs-meta); font-weight:700;
          padding:2px 8px 3px; letter-spacing:.06em; }
.trbars{ display:grid; grid-template-columns:44px 1fr 110px; gap:6px 12px; align-items:center; max-width:560px; }
.trbars .lb{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--mute); }
.trbars .tk{ height:5px; background:var(--faint); position:relative; }
.trbars .tk i{ position:absolute; inset:0 auto 0 0; }
.trbars .tk.src i{ background:var(--bar-src); }
.trbars .tk.out i{ background:var(--ink); }
.trbars .val{ font-family:var(--mono); font-size:12px; text-align:right; white-space:nowrap; }
.sheet .note{ font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); padding:14px 0 0;
              line-height:1.9; text-transform:uppercase; }
.sheet .note a{ color:var(--ink); border-bottom:1px solid var(--ink); }

.neighbors{ margin:clamp(40px,7vh,72px) 0 0; display:grid; grid-template-columns:1fr 1fr; gap:1px;
            background:var(--hair); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.nb{ background:var(--bg); padding:18px var(--gut) 22px; display:flex; gap:18px; align-items:center; transition:background .2s; }
.nb:hover{ background:#fcfcfc; }
.nb .dir{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
          color:var(--mute); display:block; margin-bottom:8px; }
.nb .ph{ width:120px; aspect-ratio:4/3; overflow:hidden; flex:none; border:1px solid var(--hair); }
.nb .ph img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); transition:filter .35s; }
.nb:hover .ph img{ filter:grayscale(0); }
.nb .id{ font-family:var(--mono); font-size:15px; font-weight:700; }
.nb .w{ font-size:var(--fs-body); margin-top:3px; }
.nb.next-empty{ justify-content:space-between; }
.nb.next-empty .slot{ width:120px; aspect-ratio:4/3; border:1px dashed var(--ink); flex:none;
                      display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:300;
                      transition:background .2s; }
.nb.next-empty:hover{ background:#fdffe8; }
.nb.next-empty .w{ font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); }

/* ── i18n: 단일 URL 3언어 인라인(.lng) — html[data-lang]이 표시 결정(head 스크립트, 무JS·봇=en) ── */
.lng{ display:none; }
html[data-lang="en"] .lng-en{ display:inline; }
html[data-lang="ja"] .lng-ja{ display:inline; }
html[data-lang="ko"] .lng-ko{ display:inline; }
.lang-sw{ display:flex; gap:0 14px; font-family:var(--mono); font-size:var(--fs-meta);
          letter-spacing:.12em; text-transform:uppercase; }
.lang-sw a{ color:var(--mute); border-bottom:1px solid transparent; cursor:pointer; transition:color .2s; }
.lang-sw a:hover{ color:var(--ink); }
html[data-lang="en"] .lang-sw a[data-setlang="en"],
html[data-lang="ja"] .lang-sw a[data-setlang="ja"],
html[data-lang="ko"] .lang-sw a[data-setlang="ko"],
.lang-sw a.cur{ color:var(--ink); background:var(--acid); padding:1px 6px 2px; }

/* ── 404: 빈 레코드 ───────────────────────── */
.nf{ border-top:1px solid var(--ink); padding:clamp(48px,10vh,120px) var(--gut) clamp(48px,10vh,100px); }
.nf h1{ font-family:var(--display); font-size:clamp(80px,16vw,260px); line-height:.9; letter-spacing:-.02em; }
.nf .mark-line{ margin-top:18px; }
.nf .mark-line mark{ background:var(--acid); font-family:var(--mono); font-size:14px; font-weight:700;
                     letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; }
.nf p{ max-width:520px; margin-top:24px; font-size:var(--fs-ui); line-height:1.6; }
.nf .acts{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px 28px; font-family:var(--mono);
           font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.nf .acts a{ border:1px solid var(--ink); padding:13px 18px; transition:all .2s; }
.nf .acts a:hover{ background:var(--ink); color:var(--acid); }
.nf .acts a.fill{ background:var(--acid); border-color:var(--ink); }
.nf .acts a.fill:hover{ background:var(--ink); color:var(--acid); }

/* ── upload: № 예약 + 폼 (§1-D — ersatz contact 함수 공용, 2026-06-11) ── */
.up-cover{ border-top:1px solid var(--ink); padding:clamp(40px,7vh,84px) var(--gut) 0; }
.up-cover h1{ font-family:var(--display); text-transform:uppercase;
              font-size:clamp(38px,7.4vw,110px); line-height:.94; letter-spacing:-.015em; }
.up-cover h1 .ln{ display:block; }
.up-cover h1 .ln.indent{ padding-left:var(--cover-indent); }
.up-cover h1 mark{ background:var(--acid); color:inherit; padding:0 .08em; }
.up-beta{ display:inline-block; margin-top:26px; background:var(--acid); font-family:var(--mono);
          font-size:12px; font-weight:700; letter-spacing:.1em; padding:6px 12px; }
.up-intro{ max-width:560px; margin-top:18px; font-size:var(--fs-ui); line-height:1.6; }

.up-grid{ display:grid; grid-template-columns:minmax(300px,1fr) minmax(380px,1.2fr); gap:clamp(28px,5vw,72px);
          padding:clamp(32px,5vh,56px) var(--gut) 0; align-items:start; }
.up-steps .creed-line{ border-top:1px solid var(--hair); padding:18px 0 20px; }
.up-steps .creed-line:first-child{ border-top:1px solid var(--ink); }
.up-steps .k{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.16em;
              text-transform:uppercase; display:block; margin-bottom:8px; }
.up-steps .k i{ font-style:normal; color:var(--mute); margin-right:8px; }
.up-steps p{ font-size:var(--fs-body); line-height:1.55; }
.up-steps .stamp-next{ margin-top:24px; }
.up-steps .stamp-next .chip-big{ display:inline-block; background:var(--acid); font-family:var(--mono);
                                 font-size:24px; font-weight:700; letter-spacing:.04em; padding:8px 14px; }
.up-steps .stamp-next .w{ font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute);
                          margin-top:10px; line-height:1.9; text-transform:uppercase; letter-spacing:.06em; }
.up-steps .privacy{ margin-top:22px; font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); line-height:1.9; }

.upform{ border:1px solid var(--ink); padding:clamp(20px,3vw,32px); }
.upform .cf-field{ margin-bottom:18px; }
.upform label{ display:block; font-family:var(--mono); font-size:var(--fs-meta); font-weight:700;
               letter-spacing:.14em; text-transform:uppercase; margin-bottom:7px; }
.upform label .nt{ font-weight:400; color:var(--mute); letter-spacing:.06em; margin-left:10px; text-transform:none; }
.upform .cf-input{ width:100%; border:1px solid var(--ink); background:var(--bg); padding:12px 14px;
                   font:400 var(--fs-ui)/1.5 var(--sans); color:var(--ink); border-radius:0; }
.upform .cf-input:focus{ outline:2px solid var(--ink); outline-offset:2px; }
.upform .cf-textarea{ resize:vertical; min-height:160px; }
.upform .cf-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.upform .cf-captcha{ margin:4px 0 18px; }
.upform .cf-send{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.12em;
                  text-transform:uppercase; background:var(--ink); color:#fff; border:0; border-radius:0;
                  padding:16px 26px; cursor:pointer; box-shadow:6px 6px 0 var(--acid);
                  transition:transform .15s, box-shadow .15s; }
.upform .cf-send:hover{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--acid); }

.sent{ display:none; margin:0 var(--gut); }
.sent:target{ display:block; }
.sent .inner{ margin-top:18px; background:var(--acid); font-family:var(--mono); font-size:12px; font-weight:700;
              letter-spacing:.08em; text-transform:uppercase; padding:14px 18px; }

/* ── responsive ───────────────────────────── */
@media (max-width:1000px){
  .feed{ grid-template-columns:repeat(2,1fr); }
  .creed{ grid-template-columns:1fr; }
  .creed > div + div{ padding-left:0; border-left:none; border-top:1px solid var(--hair); }
}
@media (max-width:900px){
  .up-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .sheet dl{ grid-template-columns:1fr; }
  .sheet dt{ padding-bottom:0; }
  .sheet dd{ border-top:none; padding-top:4px; }
  .neighbors{ grid-template-columns:1fr; }
  .rec-head .side{ text-align:left; }
  .trbars{ grid-template-columns:34px 1fr 90px; }
}
@media (max-width:560px){
  .feed{ grid-template-columns:1fr; }
  .cell.big{ grid-column:span 1; grid-row:span 1; }
  .strip a:nth-child(n+6){ display:none; }
}