@font-face{font-family:Supreme;src:url(/supreme.woff2) format("woff2");font-display:swap}
:root{color-scheme:dark;font:16px Supreme,system-ui,sans-serif;color:var(--text);background:var(--background);--panel:#171717;--line:#343434;--muted:#b6b6b6;--accent:#ff751f;--text:#fdf6f6;--background:#000;--surface:#101010;--hover-surface:#282828;--control-line:#666;--accent-hover:#ff974e;--accent-surface:#2c1a10;--accent-line:#a74a1b}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 80% 0,#28160b 0,transparent 38rem),var(--background)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top-inner,.brand,.account,.site-main,.actions,.edit-head{display:flex;align-items:center}
.top-inner{min-height:4.75rem;justify-content:space-between;gap:1rem}
.brand{gap:.95rem;font-weight:650}
.brand img{width:2.6rem;height:2.25rem;object-fit:contain;filter:brightness(0) saturate(100%) invert(55%) sepia(89%) saturate(2013%) hue-rotate(347deg) brightness(101%) contrast(101%)}
.brand span{border-left:1px solid var(--line);padding-left:.95rem}
.account{gap:.75rem;color:var(--muted);margin:0;font-size:.88rem}
h1,h2,p{margin:0}
h1{font-size:clamp(2.5rem,6vw,4.85rem);font-weight:750;letter-spacing:-.057em;line-height:.98}
h2{font-size:1.45rem;line-height:1.15;letter-spacing:-.025em}
p{line-height:1.5;color:var(--muted)}
.heading{margin-block:clamp(2.75rem,8vw,5.5rem) 2rem}
.back{display:inline-block;color:var(--accent);margin-bottom:1rem}
.site-card,.edit-card,.login-card{background:var(--panel);border:1px solid var(--line);border-radius:1rem}
.site-card{padding:1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1.25rem;flex-wrap:wrap}
.site-main{gap:1rem;min-width:0}
.site-main p,.edit-head p,.login-card p{margin-top:.35rem}
.site-icon{background:var(--accent);width:3.5rem;height:3.5rem;border-radius:.6rem;display:grid;place-items:center;flex:none}
.site-icon img{width:70%;filter:brightness(0)}
.actions{gap:.55rem;flex-wrap:wrap}
.button,.quiet{font:inherit;font-weight:700;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.button{background:var(--accent);color:#000;border-radius:.5rem;min-height:2.75rem;padding:.65rem 1rem}
.button:hover{background:var(--accent-hover)}
.secondary,.quiet{background:transparent;color:var(--text);border-color:var(--control-line)}
.secondary:hover,.quiet:hover{background:var(--hover-surface)}
.quiet{border-radius:.4rem;padding:.45rem .65rem}
.signin{display:grid;place-items:center;min-height:calc(100vh - 4.75rem);padding-block:2rem}
.login-card{width:min(100%,27rem);padding:clamp(1.25rem,4vw,2rem)}
.login-card h1{font-size:clamp(2.3rem,7vw,3.15rem)}
.login-card form{display:grid;gap:1rem;margin-top:1.5rem}
.login-card button{margin-top:.2rem}
.editor{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1.25rem;padding-bottom:3rem}
.tabs{display:flex;flex-direction:column;gap:.3rem}
.tabs a{padding:.8rem .9rem;border:1px solid transparent;border-radius:.55rem;color:var(--muted)}
.tabs a:hover{background:var(--hover-surface)}
.tabs [aria-current]{background:var(--accent-surface);color:var(--accent);border-color:var(--accent-line)}
.edit-card{padding:clamp(1rem,3vw,1.7rem)}
.edit-head{justify-content:space-between;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.profile-text-group{min-width:0;margin:0 0 1.25rem;padding:1rem;border:1px solid var(--line);border-radius:.55rem}
.profile-text-group legend{padding-inline:.4rem;font-weight:700}
label{display:grid;gap:.42rem;align-content:start;font-weight:600;min-width:0}
label:has(textarea){grid-column:1 / -1}
input,textarea{font:inherit;font-weight:400;width:100%;color:var(--text);background:var(--surface);border:1px solid var(--control-line);border-radius:.4rem;padding:.65rem .72rem}
input:focus,textarea:focus{outline:1px solid var(--accent);border-color:var(--accent)}
textarea{resize:vertical;line-height:1.5}
small{color:var(--muted);font-weight:400}
.publish{margin-top:1.5rem;justify-content:flex-end;padding-top:1rem;border-top:1px solid var(--line)}
.restore{margin-top:1.25rem;color:var(--muted)}
.restore summary{cursor:pointer;width:fit-content}
.restore .actions{margin-top:.7rem}
.message{padding:.65rem .85rem;margin:.7rem 0 1rem;border:1px solid var(--accent-line);background:var(--accent-surface);border-radius:.5rem;color:var(--text)}
.message.error{border-color:#9f5547;background:#36201c;color:#ffd1c6}
@media(max-width:750px){.editor{grid-template-columns:1fr}.tabs{flex-direction:row;flex-wrap:wrap}.tabs a{padding:.5rem .65rem}.fields{grid-template-columns:1fr}}
@media(max-width:420px){.wrap{width:calc(100% - 1.5rem)}.brand{gap:.5rem}.brand span{padding-left:.5rem}.brand img{width:1.9rem}.account{gap:.45rem}.site-card .actions{width:100%}.publish{justify-content:flex-start}}

.project-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.project-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;background:var(--surface);border:1px solid var(--line);border-radius:.55rem;padding:.55rem .7rem}
.project-name,.project-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.project-name{font-weight:700}
.project-name img{width:4.25rem;height:2.75rem;object-fit:cover;border-radius:.25rem}
.project-tools{gap:.3rem}
.project-tools button:disabled{opacity:.35;cursor:default}
.project-edit-image{max-width:min(100%,26rem);max-height:15rem;object-fit:contain;border-radius:.5rem}

.site-card + .site-card { margin-top: 1rem; }
.site-icon.site-preview { width: 7rem; height: 4.35rem; overflow: hidden; background: var(--hover-surface); }
.site-icon.site-preview img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.client-nav { display: flex; align-items: end; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.65rem; }
.client-nav label { flex: 1 1 18rem; }
.client-nav select { width: 100%; min-height: 2.75rem; padding: .5rem .7rem; color: inherit; background: var(--surface); font: inherit; border: 1px solid var(--control-line); border-radius: .5rem; }
.client-title { margin-bottom: .4rem; }
.client-status { margin-bottom: 1rem; }
.client-photo img { width: min(100%, 20rem); height: 9rem; object-fit: cover; border-radius: .45rem; background: var(--hover-surface); }

.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.1rem; padding-bottom: 3rem; }
.site-gallery-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: .95rem; background: var(--panel); }
.site-cover { display: block; overflow: hidden; background: var(--surface); }
.site-cover:focus-visible { outline-offset: -3px; }
.site-browser-bar { display: flex; align-items: center; gap: .3rem; padding: .55rem .7rem; background: #222; color: var(--text); font-size: .75rem; }
.site-browser-bar > span:not(.site-browser-domain) { width: .36rem; height: .36rem; border-radius: 50%; background: #8a8a8a; }
.site-browser-domain { margin-inline-start: .55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-cover img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 298; object-fit: contain; transition: transform .2s ease; }
@media (hover: hover) { .site-cover:hover img { transform: scale(.99); } }
@media (prefers-reduced-motion: reduce) { .site-cover img { transition: none; } }
.site-gallery-copy { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: 1rem; }
.site-gallery-copy .actions { margin-top: auto; padding-top: .65rem; }
.client-photo { grid-column: auto; }
.fields .client-photo input[type=file] { padding: .55rem; }

.library-note { margin-bottom: 1rem; }
.library-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,16rem),1fr)); gap: .9rem; align-items: start; }
.library-card { overflow: hidden; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); }
.library-cover { display: grid; place-items: center; aspect-ratio: 16/9; background: #222; }
.library-cover img { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.library-caption { padding: .75rem; overflow-wrap: anywhere; }
.library-caption h3 { margin: 0 0 .3rem; font-size: 1rem; }
.library-caption p { font-size: .8rem; }
.library-caption details { padding-top: .65rem; }
.library-caption summary { cursor: pointer; color: var(--accent); font-weight: 650; }
.library-caption form { display: grid; gap: .55rem; margin-top: .65rem; }
.library-pager { margin-top: 1rem; justify-content: center; }
.inline-photos { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.inline-photos .edit-head h3 { margin: 0; font-size: 1.3rem; }

.library-caption h4 { margin: 0 0 .3rem; font-size: 1rem; }
.library-caption > a.button { margin-top: .55rem; min-height: 2.1rem; padding: .35rem .55rem; }
.library-caption details label { margin-top: .7rem; }
.library-caption .reset-photo { display: flex; align-items: center; }
.library-caption .reset-photo input { width: auto; }

.photo-preview-trigger { appearance: none; border: 0; padding: 0; cursor: zoom-in; color: inherit; font: inherit; }
.photo-preview-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
button.library-cover { width: 100%; }
.project-edit-preview { display: block; justify-self: start; max-width: 100%; background: transparent; }
.project-thumb-preview { display: inline-flex; border-radius: .25rem; background: transparent; }
.photo-preview { box-sizing: border-box; max-width: min(92vw, 76rem); max-height: 92dvh; padding: 0; border: 1px solid var(--line); border-radius: .9rem; color: inherit; background: var(--panel); }
.photo-preview::backdrop { background: rgb(0 0 0 / 78%); }
.photo-preview-inner { display: grid; gap: .8rem; padding: .9rem; }
.photo-preview header { display: flex; gap: 1rem; justify-content: space-between; align-items: center; }
.photo-preview h2 { font-size: 1.05rem; overflow-wrap: anywhere; }
.photo-preview img { display: block; max-height: calc(92dvh - 5.4rem); max-width: 100%; width: auto; height: auto; object-fit: contain; margin-inline: auto; }
.photo-preview [hidden] { display: none; }
html:has(.photo-preview[open]) { overflow: hidden; }

.photo-preview { width: min(94vw, 76rem); max-width: 94vw; max-height: 94dvh; }
.photo-preview-inner { grid-template-rows: auto minmax(0, 1fr) auto; }
.photo-preview-stage { overflow: auto; overscroll-behavior: contain; height: min(72dvh, 54rem); background: var(--background); border-radius: .55rem; }
.photo-preview-canvas { display: flex; width: max-content; min-width: 100%; min-height: 100%; }
.photo-preview-stage img { display: block; margin: auto; flex: none; max-width: none; max-height: none; width: auto; height: auto; }
.photo-preview-stage p { padding: 1rem; }
.photo-preview-controls { display: flex; justify-content: space-between; align-items: center; gap: .45rem; flex-wrap: wrap; }
.photo-preview-controls > div { display: flex; align-items: center; gap: .35rem; }
.photo-preview-controls button { min-width: 2.65rem; }
.photo-preview-controls button:disabled { cursor: default; opacity: .45; }
.photo-preview-controls [data-position] { text-align: center; min-width: 4rem; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) {
  .photo-preview-stage { height: 64dvh; }
  .photo-preview-controls > div { gap: .25rem; }
  .photo-preview-controls [data-position] { min-width: 3rem; }
}

::selection { color: #000; background: var(--accent); }
:root { accent-color: var(--accent); }