/* page-tatitra.css — extracted from design handoff */
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:-28px 0 36px;position:relative;z-index:2}
.bar .f{height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:700 14px var(--sans);color:var(--ink2);cursor:pointer}
.bar .f.on{background:var(--p700);color:#fff;border-color:var(--p700)}
.bar input{margin-left:auto;height:44px;border-radius:999px;border:1.5px solid var(--line);padding:0 18px;font:15px var(--sans);min-width:260px;background:#fff}
.bar input:focus{outline:2px solid var(--p300);border-color:var(--p500)}
.list{display:grid;gap:14px}
.row{display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;transition:border-color .2s, box-shadow .2s}
.row:hover{border-color:var(--p300);box-shadow:0 10px 26px rgba(77,0,110,.08)}
.row .cv{aspect-ratio:16/10;border-radius:4px;background:var(--p100) center top/cover;border:1px solid var(--line)}
.row .meta{font:600 11.5px var(--mono);letter-spacing:.12em;color:var(--p500);text-transform:uppercase}
.row h3{font-size:21px;font-weight:900;color:var(--ink);margin:6px 0 4px}
.row .sub{color:var(--mute);font-size:14.5px}
.row p{color:var(--ink2);font-size:15px;margin-top:8px;max-width:70ch}
.row .tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.row .tags span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--p50);color:var(--p500)}
.row .acts{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:160px}
.row .acts .btn{justify-content:center}
.grp{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:30px 0 4px;padding-bottom:10px;border-bottom:2px solid var(--p700);display:flex;justify-content:space-between}
.grp:first-child{margin-top:0}
.viewer{position:fixed;inset:0;z-index:120;background:rgba(20,6,32,.92);display:none;flex-direction:column}
.viewer.open{display:flex}
.viewer .vh{display:flex;align-items:center;gap:14px;padding:14px 22px;color:#fff}
.viewer .vh b{font-size:17px;flex:1}
.viewer iframe{flex:1;border:0;background:#fff;margin:0 22px 22px;border-radius:6px}
.empty{padding:40px;text-align:center;color:var(--mute)}
@media (max-width:820px){
  .row{grid-template-columns:1fr}
  .row .cv{max-width:260px}
  .row .acts{flex-direction:row}
  .bar input{margin-left:0;min-width:0;width:100%}
}