:root{
  --ink:#111111;
  --muted:#666666;
  --rule:#dcdcdc;
  --bg:#ffffff;
  --serif: Georgia, "Times New Roman", Times, serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible, [contenteditable]:focus-visible, input:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:2px;
}

.page{ padding:0 22px; }

header{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:center; gap:8px; font-size:15px; }
.brand img{ height:20px; width:auto; display:block; }
.brand-name[contenteditable="true"]{ padding:2px 4px; margin:-2px -4px; }
nav{ display:flex; gap:24px; font-size:14px; align-items:center; }
.edit-toggle{
  font-size:13px; color:var(--muted); cursor:pointer;
  background:none; border:none; font-family:var(--serif); padding:0;
}
.edit-toggle:hover{ color:var(--ink); text-decoration:underline; }

.block{ max-width:900px; }
.space-lg{ height:96px; }
.space-md{ height:56px; }
.space-sm{ height:28px; }

.info-line{ font-size:15px; }
[contenteditable="true"]{ cursor:text; }
[contenteditable="true"]:hover{ background:#fafafa; }
[contenteditable="true"]:focus{ background:#fafafa; outline:1px dashed #bbb; }

.credits-grid{
  display:grid; grid-template-columns:150px 1fr;
  row-gap:4px; column-gap:16px; font-size:15px; max-width:760px;
}
.credits-cat{ color:var(--muted); }
.credit-row{ display:contents; }
.credit-remove{ display:none; font-size:12px; color:var(--muted); cursor:pointer; margin-left:8px; }
body.editing .credit-remove{ display:inline; }
.add-credit-row{ display:none; margin-top:10px; font-size:14px; }
body.editing .add-credit-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.add-credit-row input{
  font-family:var(--serif); font-size:14px; border:none;
  border-bottom:1px solid var(--rule); padding:3px 2px; background:transparent;
}
.add-credit-row input[name="cat"]{ width:130px; }
.add-credit-row input[name="text"]{ width:260px; }
.add-credit-row button{
  font-family:var(--serif); font-size:13px; background:none;
  border:1px solid var(--ink); padding:3px 10px; cursor:pointer;
}

/* Links row (reel, IMDb, Instagram, etc.) */
.links-row{ font-size:15px; margin-top:2px; }
.links-row a{ margin-right:18px; }
.link-remove{ display:none; font-size:11px; color:var(--muted); cursor:pointer; margin-left:4px; }
body.editing .link-remove{ display:inline; }
.add-link-row{ display:none; margin-top:10px; font-size:14px; }
body.editing .add-link-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.add-link-row input{
  font-family:var(--serif); font-size:14px; border:none;
  border-bottom:1px solid var(--rule); padding:3px 2px; background:transparent;
}
.add-link-row input[name="label"]{ width:110px; }
.add-link-row input[name="url"]{ width:260px; }
.add-link-row button{
  font-family:var(--serif); font-size:13px; background:none;
  border:1px solid var(--ink); padding:3px 10px; cursor:pointer;
}

.section-title{ font-size:15px; }

/* Selected Work — clickable project stills */
.entry{ margin-bottom:0; }
.entry-image-wrap{ width:min(68vw, 1080px); position:relative; }
.entry-image-wrap img{ width:100%; height:auto; display:block; object-fit:contain; }
.entry-image-wrap a{
  display:block;
  cursor:pointer;
}
.entry-image-wrap a img{ transition:opacity 200ms ease; }
.entry-image-wrap a:hover img{ opacity:0.92; }

.entry-caption{ font-size:13px; margin-top:10px; color:var(--ink); }
.entry-caption .job-title{ font-style:italic; }
.entry-caption .job-meta{ color:var(--muted); }

.entry-controls{ display:none; margin-top:8px; font-size:12px; gap:14px; }
body.editing .entry-controls{ display:flex; }
.entry-controls span{ cursor:pointer; color:var(--muted); }
.entry-controls span:hover{ color:var(--ink); text-decoration:underline; }

.empty-note{ font-size:14px; color:var(--muted); font-style:italic; }

.add-entry{
  display:none; max-width:520px; border-top:1px solid var(--rule);
  padding-top:24px; margin-top:8px;
}
body.editing .add-entry{ display:block; }
.add-entry h3{ font-size:14px; font-weight:normal; margin:0 0 14px 0; color:var(--muted); }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.field input[type="text"]{
  width:100%; font-family:var(--serif); font-size:14px; border:none;
  border-bottom:1px solid var(--rule); padding:5px 2px; background:transparent;
}
.field input[type="text"]:focus{ outline:none; border-bottom-color:var(--ink); }
.field input[type="file"]{ font-family:var(--serif); font-size:13px; }
.field .hint{ font-size:11px; color:var(--muted); margin-top:4px; }
.add-entry button{
  font-family:var(--serif); font-size:13px; background:none;
  border:1px solid var(--ink); padding:6px 16px; cursor:pointer;
}
.add-entry button:hover{ background:var(--ink); color:#fff; }

.publish-bar{
  display:none; max-width:900px; border-top:1px solid var(--rule);
  margin-top:56px; padding-top:20px;
}
body.editing .publish-bar{ display:block; }
.publish-bar p{ font-size:13px; color:var(--muted); max-width:560px; margin:0 0 14px 0; }
.publish-bar button{
  font-family:var(--serif); font-size:13px; background:none;
  border:1px solid var(--ink); padding:6px 16px; cursor:pointer; margin-right:10px;
}
.publish-bar button:hover{ background:var(--ink); color:#fff; }
.publish-bar .ghost:hover{ background:none; color:var(--muted); text-decoration:underline; }

footer{ font-size:12px; color:var(--muted); }

/* Project detail page */
.project-meta{ font-size:14px; color:var(--muted); margin-top:8px; }
.project-title{ font-size:16px; font-style:italic; }
.back-link{ font-size:14px; }

@media (max-width: 720px){
  .entry-image-wrap{ width:100%; }
  nav{ gap:14px; }
  .credits-grid{ grid-template-columns:120px 1fr; }
}