*{box-sizing:border-box}
:root{--bg:#ffffff;--primary:#0000ff;--overlay:#000000;--font-title:Arial,Helvetica,sans-serif;--font-body:Arial,Helvetica,sans-serif}
html{scroll-behavior:auto!important}
body{margin:0;overflow-anchor:none;background:var(--bg);color:var(--primary);font-family:var(--font-body,Arial,Helvetica,sans-serif);text-transform:uppercase;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.topbar{height:20vh;min-height:140px;position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--primary);display:flex;align-items:center;justify-content:space-between;padding:clamp(16px,3vh,38px) clamp(16px,3vw,48px);font-weight:800;letter-spacing:-.04em}
.logo{font-family:var(--font-title,Arial,Helvetica,sans-serif);font-size:clamp(28px,3vw,84px);line-height:.9;max-width:67vw;display:flex;align-items:center;min-height:100%}
.logo-inner{display:flex;/*flex-direction:column;*/align-items:flex-start;justify-content:center;gap:.18em}
.logo-svg{display:flex;align-items:center;line-height:0;max-width:min(260px,48vw);margin: 1vh 0 0 0;}
.logo-svg svg{display:block;max-width:100%;height:auto;max-height:8vh;overflow:visible}
.logo-text{display:block; padding: 3vh 0 0 0;}
.topbar nav{display:flex;gap:12px}
.topbar nav a,.admin-btn,button,input[type=file]::file-selector-button{border:2px solid var(--primary);border-radius:999px;padding:10px 16px;background:var(--bg);color:var(--primary);font-weight:800;cursor:pointer}
.topbar nav a:hover,.admin-btn:hover,button:hover{background:var(--primary);color:var(--bg)}
.project-row{height:40vh;min-height:140px;display:grid;grid-template-columns:33.333% 66.667%;border-bottom:2px solid var(--primary);overflow:hidden}
.project-text{padding:16px clamp(16px,2vw,32px);border-right:2px solid var(--primary);display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.project-text h1,.project-text h2{font-family:var(--font-title,Arial,Helvetica,sans-serif);font-size:clamp(28px,4vw,76px);line-height:.86;margin:0;letter-spacing:-.065em}
.project-text p{font-size:clamp(12px,1.15vw,17px);line-height:1.05;margin:0;max-width:48ch;text-transform:none;letter-spacing:-.02em}
.project-meta-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}.meta{font-size:12px;font-weight:900;letter-spacing:.05em}.home-credits{font-size:12px;font-weight:900;letter-spacing:.02em;text-align:right;line-height:1.05;max-width:90%;text-transform:none}
.project-media{position:relative;cursor:ew-resize;overflow-x:auto;overflow-y:hidden;display:flex;align-items:stretch;scrollbar-width:none;overscroll-behavior:contain}
.project-row:not(.is-clickable) .project-text,.project-row:not(.is-clickable) .project-media{cursor:default}
.project-media::-webkit-scrollbar{display:none}
.media-track{display:flex;gap:0;width:max-content;min-width:max-content;will-change:scroll-position;cursor: ew-resize;}
.media-track img,.media-track video{height:100%;width:auto;filter:saturate(1.05);padding:2vh 2vw;}
.media-track img:not([src]),.media-track video:not([src]){min-width:28vw;background:transparent}
.project-row:hover{background:var(--project-hover-bg,var(--primary));color:var(--bg)}
.page,.project-detail{padding:clamp(28px,5vw,80px);min-height:80vh}
.page h1,.detail-head h1{font-family:var(--font-title,Arial,Helvetica,sans-serif);font-size:clamp(70px,16vw,240px);line-height:.78;margin:0 0 40px;letter-spacing:-.08em}
.richtext,.detail-head div{font-size:clamp(22px,4vw,64px);line-height:.95;letter-spacing:-.06em;max-width:1100px;text-transform:none}
.detail-head{min-height:70vh;display:flex;flex-direction:column;justify-content:space-between;border-bottom:2px solid var(--primary);padding-bottom:40px}
.detail-head p,.detail-head small{font-weight:800}
.detail-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;margin-top:2px;background:var(--primary)}
.detail-media img,.detail-media video{width:100%;height:auto;background:var(--bg);display:block}
.admin-body{text-transform:none;background:#f8f8ff;color:#0000ff;font-family:Arial,Helvetica,sans-serif}
.admin-wrap{max-width:1200px;margin:0 auto;padding:24px}
.admin-card{background:#fff;border:2px solid #0000ff;border-radius:24px;padding:20px;margin:16px 0;box-shadow:0 8px 0 #0000ff}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.admin-grid-wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field label{font-weight:800}
.field input,.field textarea,.field select{width:100%;border:2px solid #0000ff;border-radius:14px;padding:12px;background:#fff;color:#0000ff;font:inherit}
.field textarea{min-height:140px}
.field textarea.code-editor{min-height:320px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:13px;line-height:1.35;tab-size:2;white-space:pre;overflow:auto;text-transform:none}
.inline-options{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}.inline-options label{border:1px solid #0000ff;border-radius:999px;padding:8px 12px;background:#fff}
.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{border-bottom:1px solid #0000ff;padding:12px;text-align:left}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}.thumbs img,.thumbs video{width:120px;height:80px;object-fit:cover;border:2px solid #0000ff;border-radius:10px}
.media-admin-card{position:relative}.media-admin-card .remove-media{position:absolute;top:12px;right:12px}
.danger{border-color:#000;background:#000;color:#fff}.notice{padding:12px;border-radius:14px;background:#0000ff;color:#fff}.muted{opacity:.7;font-size:.92em}
@media(max-width:760px){.topbar{height:20vh;min-height:130px;padding:20px 16px;align-items:flex-start;gap:14px}.logo-inner {flex-direction: column;}.logo-svg{max-width: min(260px, 10vw);margin: 0vh 0 -3vh 0;}.logo{font-size:clamp(24px,6vw,62px);max-width:calc(100vw - 160px);line-height:.92}.topbar nav{flex-direction:column;gap:10px;align-items:flex-end;flex:0 0 auto}.topbar nav a{min-width:116px;text-align:center;padding:10px 14px}.project-row{height:auto;min-height:40vh;grid-template-columns:1fr}.project-text{border-right:0;border-bottom:2px solid var(--primary);min-height:20vh}.media-track img,.media-track video{height:20vh;width:auto;min-width:0;padding:2vh 0}.detail-media{display:block;background:transparent}.detail-media img,.detail-media video{width:100%;height:auto}.page,.project-detail{padding:24px}}

.upload-progress{height:12px;border:2px solid #0000ff;border-radius:999px;overflow:hidden;background:#fff;margin:10px 0}.upload-progress span{display:block;height:100%;width:0;background:#0000ff;transition:width .15s linear}.upload-list{font-size:.9em;line-height:1.35}
.drag-handle{cursor:grab;font-size:22px;font-weight:900;user-select:none}.project-sort-table tr.is-dragging{opacity:.45}.color-chip{display:inline-block;width:32px;height:20px;border:2px solid #0000ff;border-radius:999px;vertical-align:middle}.field small{display:block;margin-top:6px}.logo-svg textarea{font-family:monospace}

/* Performance: skip rendering rows far outside the viewport. */
.project-row{content-visibility:auto;contain-intrinsic-size:auto 40vh;contain:layout paint style}
.media-track{will-change:auto}
.lazy-media{display:block;max-width:none}
@media(max-width:760px){
  body{overflow-anchor:auto}
  .project-row{contain-intrinsic-size:auto 40vh}
  .project-media{cursor:default;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
  .media-track{cursor:default}
}
@media(prefers-reduced-motion:reduce){
  .project-media{scroll-behavior:auto}
}