/* ============================================================
   Liz Castañeda · desktop portfolio
   ============================================================ */

:root{
  --ink:#0d0d0f;
  --ink-2:#3c3c43;
  --ink-3:#77777f;
  --hair:rgba(0,0,0,.10);
  --hair-2:rgba(0,0,0,.06);
  --win:rgba(255,255,255,.94);
  --radius-win:13px;
  --shadow-win:0 1px 1px rgba(0,0,0,.06),0 8px 18px rgba(0,0,0,.13),0 30px 70px rgba(0,0,0,.22);
  --accent:#0a6cff;
  --ease:cubic-bezier(.22,.9,.26,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  --dock-h:60px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:#000;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit}

/* ---------- boot ---------- */
.boot{
  position:fixed;inset:0;z-index:999;background:#000;
  display:grid;place-items:center;
  transition:opacity .55s var(--ease),visibility .55s;
}
.boot.done{opacity:0;visibility:hidden}
.boot-mark{
  font-size:13px;letter-spacing:.42em;color:#fff;opacity:.85;
  padding-left:.42em;
  animation:pulse 1.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:.9}}

/* ---------- bezel + screen ---------- */
.bezel{
  position:fixed;inset:0;
  padding:clamp(0px,1.6vmin,22px);
  background:#000;
}
.screen{
  position:relative;width:100%;height:100%;
  border-radius:clamp(0px,1.5vmin,20px);
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
  animation:screenIn .8s var(--ease) both;
}
@keyframes screenIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

.wallpaper{
  position:absolute;inset:0;
  background:#d9d9d9 url("assets/wallpaper.webp") center/cover no-repeat;
}
.wallpaper::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 110%,rgba(0,0,0,.16),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.14),transparent 22%);
}

/* ---------- corner furniture ---------- */
.fs-btn{
  position:absolute;top:14px;right:14px;z-index:60;
  width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;
  color:#fff;background:rgba(20,20,22,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .2s,transform .2s var(--ease);
}
.fs-btn:hover{background:rgba(20,20,22,.78);transform:scale(1.06)}

.signature{
  position:absolute;top:16px;left:20px;z-index:5;
  display:flex;flex-direction:column;gap:1px;
  pointer-events:none;user-select:none;
}
.sig-name{font-size:19px;font-weight:660;letter-spacing:-.022em;line-height:1.1;color:rgba(20,20,22,.92)}
.sig-role{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:rgba(20,20,22,.55);margin-top:3px}

/* ---------- desktop icons ---------- */
.icons{position:absolute;inset:0;z-index:10}
/* Positioned by its top-left corner, like a real desktop icon.
   The centring maths lives in JS so drag coordinates never disagree with layout. */
.icon{
  position:absolute;
  width:112px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:6px 4px 5px;border-radius:9px;
  cursor:default;user-select:none;-webkit-user-select:none;
  touch-action:none;
  transition:background .15s;
  animation:iconIn .6s var(--ease) both;
}
@keyframes iconIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.icon:hover .icon-art{transform:translateY(-2px) scale(1.03)}
.icon.selected{background:rgba(10,108,255,.20)}
.icon.selected .icon-label{background:var(--accent);color:#fff;text-shadow:none}

.icon-art{
  width:66px;height:50px;border-radius:6px;overflow:hidden;
  background:#c9c9c9;
  box-shadow:0 1px 2px rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.16);
  transition:transform .22s var(--ease);
}
.icon-art img{width:100%;height:100%;object-fit:cover;display:block}

.icon-label{
  font-size:11.5px;line-height:1.25;text-align:center;
  padding:1px 5px;border-radius:4px;
  color:#141416;
  text-shadow:0 1px 2px rgba(255,255,255,.75);
  max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.icon.dragging{cursor:grabbing;opacity:.72;z-index:5}
.icon.dragging .icon-art{transform:none;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.icon.dragging .icon-label{background:transparent}

/* ---------- windows ---------- */
.windows{position:absolute;inset:0;z-index:20;pointer-events:none}
.win{
  position:absolute;pointer-events:auto;
  display:flex;flex-direction:column;
  background:var(--win);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-radius:var(--radius-win);
  box-shadow:var(--shadow-win);
  /* overflow stays visible so the parrots can sit above the top edge; the
     titlebar and body round their own corners instead */
  overflow:visible;
  border:.5px solid rgba(255,255,255,.5);
  transform-origin:center bottom;
  animation:winIn .3s var(--ease) both;
}
@keyframes winIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.win.closing{animation:winOut .18s var(--ease) forwards}
@keyframes winOut{to{opacity:0;transform:scale(.95)}}
.win.minimizing{animation:winMin .3s var(--ease) forwards}
@keyframes winMin{to{opacity:0;transform:scale(.2) translateY(40vh)}}
.win.maxed{border-radius:0}
.win:not(.focused){box-shadow:0 1px 1px rgba(0,0,0,.05),0 6px 14px rgba(0,0,0,.10),0 18px 40px rgba(0,0,0,.14)}
.win:not(.focused) .titlebar{opacity:.72}

.titlebar{
  height:38px;flex:none;position:relative;
  display:flex;align-items:center;gap:8px;padding:0 12px;
  background:rgba(250,250,250,.72);
  border-bottom:.5px solid var(--hair);
  border-radius:var(--radius-win) var(--radius-win) 0 0;
  cursor:grab;user-select:none;
}
.win.maxed .titlebar,.win.maxed .win-body{border-radius:0}
.titlebar:active{cursor:grabbing}
/* macOS keeps the normal arrow over the traffic lights, so they opt out of the
   titlebar's grab cursor. */
.lights{display:flex;gap:8px;align-items:center;cursor:default}
.light{width:12px;height:12px;border-radius:50%;position:relative;display:grid;place-items:center;cursor:default}
.light svg{opacity:0;width:7px;height:7px;transition:opacity .12s}
.lights:hover .light svg{opacity:.55}
.light.red{background:#ff5f57}
.light.yellow{background:#febc2e}
.light.green{background:#28c840}
.win:not(.focused) .light{background:#d3d3d6}

.win-title{
  position:absolute;left:0;right:0;text-align:center;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  pointer-events:none;letter-spacing:-.005em;
  padding:0 90px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:0 0 var(--radius-win) var(--radius-win)}
.win-body::-webkit-scrollbar{width:9px;height:9px}
.win-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:9px;border:2px solid transparent;background-clip:content-box}
.win-body::-webkit-scrollbar-track{background:transparent}

.resize{
  position:absolute;right:0;bottom:0;width:16px;height:16px;
  cursor:nwse-resize;z-index:3;
}

/* ---------- the parrots, perched on the top edge of every project ---------- */
/* The window's top edge is the perch. Feet are drawn at row 26 of the 32px
   sprite, so top:-26px puts them exactly on the edge and the tail hangs the
   remaining 6px over the titlebar. */
.perch{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;z-index:4}
.perch-bird{
  position:absolute;top:-26px;width:32px;height:32px;
  transform:translateX(-50%);
  background:url("assets/parrots.png") no-repeat;background-size:256px 64px;
  image-rendering:pixelated;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));
  animation:
    birdHop var(--hop,10s) ease-in-out var(--hop-delay,0s) infinite,
    birdBlink var(--blink,6s) steps(1,end) var(--blink-delay,0s) infinite;
}
/* still for most of the cycle, then a quick double hop */
@keyframes birdHop{
  0%,86%{translate:0 0}
  88%{translate:0 -3px}
  90%{translate:0 0}
  92%{translate:0 -2px}
  94%,100%{translate:0 0}
}
/* second sheet row is eyes shut; hold it for a moment near the end of the cycle */
@keyframes birdBlink{
  0%,93%{background-position-y:0}
  94%,96%{background-position-y:-32px}
  97%,100%{background-position-y:0}
}
.win.maxed .perch{display:none}
@media (max-width:720px){.perch-bird:nth-child(n+6){display:none}}
@media (prefers-reduced-motion:reduce){.perch-bird{animation:none}}

/* ---------- project window ---------- */
.proj-head{padding:26px 30px 18px}
.proj-client{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.proj-title{font-size:27px;line-height:1.12;font-weight:680;letter-spacing:-.025em;margin:6px 0 0}
.proj-year{font-size:12px;color:var(--ink-3);margin-top:5px}
.proj-body{padding:0 30px 4px;max-width:66ch}
.proj-body p{font-size:14px;line-height:1.62;color:var(--ink-2);margin:0 0 13px}
.proj-quote{
  position:relative;
  margin:6px 30px 20px;padding:20px 22px 18px;
  background:linear-gradient(180deg,rgba(0,0,0,.045),rgba(0,0,0,.025));
  border-radius:12px;overflow:hidden;
}
.quote-mark{
  position:absolute;top:-4px;right:16px;
  font-size:78px;line-height:1;font-family:Georgia,"Times New Roman",serif;
  color:rgba(0,0,0,.065);pointer-events:none;user-select:none;
}
.proj-quote blockquote{
  margin:0;position:relative;
  font-size:17px;line-height:1.45;font-weight:520;letter-spacing:-.015em;
  color:var(--ink);max-width:44ch;
}
.proj-quote blockquote::before{content:"\201C"}
.proj-quote blockquote::after{content:"\201D"}
.proj-quote figcaption{
  display:flex;align-items:center;gap:11px;
  margin-top:15px;position:relative;
}
.proj-quote figcaption img{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.22);
}
.quote-by{display:flex;flex-direction:column;min-width:0}
.quote-who{font-size:13px;font-weight:640;letter-spacing:-.01em}
.quote-role{font-size:11.5px;color:var(--ink-3);margin-top:1px}

.section-label{
  padding:16px 30px 8px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.credits{margin:0;padding:0 30px 8px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:12.5px}
.credits dt{color:var(--ink-3)}
.credits dd{margin:0;color:var(--ink-2)}
.press{list-style:none;margin:0;padding:0 30px 8px}
.press li{margin-bottom:6px}
.press a{
  font-size:12.5px;color:var(--accent);text-decoration:none;
  display:inline-flex;align-items:baseline;gap:5px;
}
.press a:hover{text-decoration:underline}
.press a::after{content:"↗";font-size:10px;opacity:.6}

.media{padding:16px 22px 26px;display:flex;flex-direction:column;gap:14px}
.media figure{margin:0;border-radius:9px;overflow:hidden;background:#eee;box-shadow:0 1px 4px rgba(0,0,0,.10)}
.media img,.media video{width:100%;display:block;background:#eee}
.media img{cursor:zoom-in}
.embed{position:relative;padding-top:56.25%;border-radius:9px;overflow:hidden;background:#000}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- finder ---------- */
.finder{display:flex;height:100%;min-height:0}
.finder-side{
  width:176px;flex:none;padding:14px 10px;
  background:rgba(246,246,247,.66);
  border-right:.5px solid var(--hair);
  font-size:12.5px;
}
.side-h{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:6px 8px}
.side-item{
  display:flex;align-items:center;gap:8px;
  padding:5px 8px;border-radius:6px;color:var(--ink-2);cursor:default;
}
.side-item > span:nth-child(2){flex:1;min-width:0}
.side-count{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.side-item:hover{background:rgba(0,0,0,.05)}
.side-item.active{background:rgba(0,0,0,.08);color:var(--ink);font-weight:560}
.side-item.active .side-dot{background:var(--accent)}
.finder-empty{padding:30px 4px;font-size:13px;color:var(--ink-3)}
.side-dot{width:7px;height:7px;border-radius:2px;background:var(--ink-3);flex:none}
.finder-main{flex:1;min-width:0;overflow:auto;padding:20px}
.grid{
  display:grid;gap:20px 12px;
  grid-template-columns:repeat(auto-fill,minmax(126px,1fr));
}
.cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 4px;border-radius:9px;cursor:default}
.cell:hover{background:rgba(0,0,0,.045)}
.cell-art{width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#ddd;box-shadow:0 1px 3px rgba(0,0,0,.16)}
.cell-art img{width:100%;height:100%;object-fit:cover;display:block}
.cell-name{font-size:12px;text-align:center;line-height:1.3;font-weight:520}
.cell-meta{font-size:10.5px;color:var(--ink-3);text-align:center;margin-top:-4px}

/* ---------- notes ---------- */
.notes{display:flex;height:100%;min-height:0}
.notes-list{
  width:216px;flex:none;overflow:auto;
  background:rgba(247,247,244,.8);border-right:.5px solid var(--hair);
  padding:8px;
}
.note-item{padding:9px 11px;border-radius:7px;cursor:default;margin-bottom:2px}
.note-item:hover{background:rgba(0,0,0,.045)}
.note-item.active{background:#ffe9a8}
.note-title{font-size:12.5px;font-weight:620;margin-bottom:2px}
.note-prev{font-size:11.5px;color:var(--ink-3);display:flex;gap:7px}
.note-prev span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes-page{flex:1;min-width:0;overflow:auto;padding:22px 34px 40px}
.notes-date{text-align:center;font-size:11px;color:var(--ink-3);margin-bottom:20px}
.notes-page h2{font-size:24px;letter-spacing:-.02em;margin:0 0 14px}
.notes-page h3{font-size:13px;letter-spacing:.04em;margin:22px 0 8px;text-transform:uppercase;color:var(--ink-3)}
.notes-page p{font-size:13.5px;line-height:1.68;color:var(--ink-2);margin:0 0 13px;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.chip{font-size:11.5px;padding:3px 9px;border-radius:20px;background:rgba(0,0,0,.06);color:var(--ink-2)}

.role-row{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:12px 0;border-top:.5px solid var(--hair-2)}
.role-when{font-size:11.5px;color:var(--ink-3);padding-top:2px}
.role-what{font-size:13.5px;font-weight:620}
.role-where{font-size:12.5px;color:var(--ink-2);margin-top:1px}
.role-note{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.55}

.aw-year{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:14px 0;border-top:.5px solid var(--hair-2)}
.aw-year > h4{margin:0;font-size:15px;font-weight:680;letter-spacing:-.01em}
.aw-item{margin-bottom:12px}
.aw-show{font-size:12.5px;font-weight:620}
.aw-work{font-size:12px;color:var(--ink-3)}
.aw-lines{margin:4px 0 0;padding-left:14px}
.aw-lines li{font-size:12px;color:var(--ink-2);line-height:1.5}

/* ---------- profile card ---------- */
.card-hero{padding:24px 26px 18px;display:flex;gap:16px;align-items:center}
.card-hero img{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.card-name{font-size:20px;font-weight:680;letter-spacing:-.02em}
.card-role{font-size:13px;color:var(--ink-2);margin-top:2px}
.card-status{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.card-text{padding:0 26px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.map{
  margin:16px 26px 22px;height:150px;border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#e8ecef,#dfe5e9);
  border:.5px solid var(--hair);
}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map-pin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;
}
.map-pin b{
  width:13px;height:13px;border-radius:50%;background:var(--accent);
  border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.map-label{
  position:absolute;left:10px;top:10px;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.9);padding:3px 8px;border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.card-actions{display:flex;gap:8px;padding:16px 26px 22px;flex-wrap:wrap}
.btn{
  font-size:12.5px;font-weight:560;padding:7px 14px;border-radius:8px;
  background:rgba(0,0,0,.07);transition:background .15s,transform .12s;
  text-decoration:none;display:inline-block;
}
.btn:hover{background:rgba(0,0,0,.12)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:#0059d6}

/* ---------- dock ---------- */
.dock{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:50;
  display:flex;align-items:flex-end;gap:8px;
  padding:7px 9px;
  border-radius:19px;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:.5px solid rgba(255,255,255,.65);
  box-shadow:0 2px 6px rgba(0,0,0,.12),0 12px 34px rgba(0,0,0,.20);
  animation:dockIn .7s .15s var(--ease) both;
}
@keyframes dockIn{from{opacity:0;transform:translateX(-50%) translateY(18px)}to{opacity:1;transform:translateX(-50%)}}
.dock-sep{width:1px;align-self:stretch;margin:4px 3px;background:rgba(0,0,0,.14)}
.dock-item{
  position:relative;width:46px;height:46px;border-radius:11px;
  display:grid;place-items:center;overflow:visible;
  transition:transform .2s var(--ease);
}
/* Each icon draws its own rounded tile, so the shadow is a drop-shadow that
   follows the artwork. A box-shadow on the wrapper would ring the whole box,
   which is visible whenever the art does not fill it exactly. */
.dock-item .di-art{
  position:absolute;inset:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.dock-item .di-art svg,
.dock-item .di-art img{width:100%;height:100%;display:block}
.dock-item .di-art img{border-radius:11px;object-fit:cover}
.dock-item:hover{transform:translateY(-8px) scale(1.14)}
.dock-item.open::after{
  content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:rgba(0,0,0,.55);
}
.dock-tip{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px);
  background:rgba(38,38,40,.9);color:#fff;font-size:11.5px;
  padding:4px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .16s,transform .16s var(--ease);
  backdrop-filter:blur(10px);
}
.dock-item:hover .dock-tip{opacity:1;transform:translateX(-50%)}

/* ---------- toast ---------- */
.toast{
  position:absolute;left:50%;bottom:calc(14px + var(--dock-h) + 22px);
  transform:translateX(-50%) translateY(8px);
  z-index:120;
  background:rgba(30,30,32,.92);color:#fff;
  font-size:12.5px;padding:8px 16px;border-radius:20px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;white-space:nowrap;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.86);
  display:grid;place-items:center;padding:4vmin;
  backdrop-filter:blur(8px);
  animation:fade .2s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lb-close{
  position:absolute;top:18px;right:22px;color:#fff;font-size:30px;line-height:1;
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);
}
.lb-close:hover{background:rgba(255,255,255,.26)}

.lightbox[hidden]{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .win-title{padding:0 70px}
  .finder-side{display:none}
  .notes-list{width:170px}
}

@media (max-width:720px){
  :root{--dock-h:54px}
  .bezel{padding:0}
  .screen{border-radius:0}
  .signature{top:12px;left:14px}
  .fs-btn{display:none}

  .icons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-content:start;
    gap:14px 4px;
    padding:64px 12px 0;
    inset:0;
  }
  /* the portrait runs dark behind the grid, so lift the area the labels sit on */
  .icons::before{
    content:"";position:absolute;left:0;right:0;top:0;height:58%;
    background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.55) 62%,rgba(255,255,255,0));
    pointer-events:none;
  }
  .icon{position:relative;z-index:1;min-width:0}
  .icon{position:static!important;transform:none!important;width:auto;animation:none;touch-action:manipulation}
  @keyframes iconIn{from{opacity:1}to{opacity:1}}
  .icon-art{width:74px;height:56px}

  /* windows become sheets */
  .win{
    inset:0!important;width:auto!important;height:auto!important;
    border-radius:0;border:0;
    animation:sheetIn .28s var(--ease) both;
  }
  @keyframes sheetIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .win .resize{display:none}
  /* the dock floats over sheets, so let content scroll clear of it */
  .win-body{padding-bottom:calc(var(--dock-h) + 26px)}
  .titlebar{height:46px;padding-top:env(safe-area-inset-top)}
  .proj-head{padding:20px 20px 14px}
  .proj-title{font-size:23px}
  .proj-body,.section-label,.credits,.press{padding-left:20px;padding-right:20px}
  .proj-quote{margin-left:20px;margin-right:20px}
  .media{padding:14px 14px 30px}
  .notes-list{width:132px}
  .notes-page{padding:18px 20px 40px}
  .role-row{grid-template-columns:1fr;gap:2px}
  .finder-main{padding:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px 10px}
  .dock{bottom:max(10px,env(safe-area-inset-bottom));gap:6px;padding:6px 8px}
  .dock-item{width:42px;height:42px}
  .dock-item:hover{transform:none}
  .card-hero{padding:20px}
  .card-text,.map,.card-actions{padding-left:20px;padding-right:20px}
  .map{margin-left:0;margin-right:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Showreel ---------- */
.reel{height:100%;background:#0b0b0d}
.reel-frame{position:relative;width:100%;height:100%}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.reel-empty{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:32px;text-align:center;color:#9b9ba6;background:#0b0b0d;
}
.reel-empty-art{width:64px;height:64px;color:#4d4d59}
.reel-empty-t{font-size:16px;font-weight:600;color:#e9e9ef;letter-spacing:-.01em}
.reel-empty p{margin:0;font-size:13px;max-width:34ch;line-height:1.5}

/* ---------- in place editing (signed in only) ---------- */
.ed-bar{
  position:absolute;right:14px;bottom:16px;z-index:70;
  display:flex;align-items:center;gap:8px;
  padding:6px 8px 6px 6px;border-radius:999px;
  background:rgba(20,20,22,.5);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 0 0 .5px rgba(255,255,255,.2);
  color:#fff;font:500 12px/1 var(--font);
}
.ed-toggle{
  display:flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font:inherit;
  transition:background .18s;
}
.ed-toggle:hover{background:rgba(255,255,255,.24)}
.ed-bar.on .ed-toggle{background:#34c759}
.ed-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);flex:none}
.ed-bar.on .ed-dot{background:#fff}
.ed-pill{opacity:.8;padding:0 4px;white-space:nowrap}
.ed-pill.saving{color:#8ec5ff}
.ed-pill.saved{color:#7ce6a8}
.ed-pill.error{color:#ff9aa2}
.ed-link{
  color:#fff;opacity:.7;text-decoration:none;padding:5px 9px;
  border-radius:999px;background:rgba(255,255,255,.1);
}
.ed-link:hover{opacity:1;background:rgba(255,255,255,.2)}

/* only while edit mode is on */
.ed-on [data-edit]{
  outline:1px dashed transparent;outline-offset:3px;border-radius:3px;
  transition:outline-color .15s,background .15s;cursor:text;
}
.ed-on [data-edit]:hover{outline-color:rgba(10,108,255,.55);background:rgba(10,108,255,.06)}
.ed-on [data-edit].ed-live{
  outline:2px solid var(--accent);outline-offset:3px;
  background:rgba(10,108,255,.08);cursor:text;
}
.ed-on [data-edit].ed-live:focus{outline:2px solid var(--accent)}


.ed-acts{display:none;align-items:center;gap:4px}
.ed-bar.on .ed-acts{display:flex}
.ed-act{
  border:0;cursor:pointer;color:#fff;font:inherit;
  padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.14);
  transition:background .18s;
}
.ed-act:hover{background:rgba(255,255,255,.28)}
.ed-act.ed-del:hover{background:rgba(255,90,90,.55)}

/* per-project media tools, only while editing */
.ed-media-tools{display:flex;gap:8px;padding:6px 30px 12px}
.ed-mt{
  padding:7px 12px;border-radius:999px;cursor:pointer;
  border:1px dashed rgba(10,108,255,.6);background:rgba(10,108,255,.06);
  color:var(--accent);font:600 12.5px var(--font);
  transition:background .15s;
}
.ed-mt:hover{background:rgba(10,108,255,.13)}
.ed-on .media figure{position:relative}
.ed-media-ctl{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:4px}
.ed-mc{
  width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(12,12,14,.78);color:#fff;font-size:15px;line-height:1;
  display:grid;place-items:center;
  transition:background .15s,transform .15s var(--ease);
}
.ed-mc:hover{background:var(--accent);transform:scale(1.08)}
.ed-mc[disabled]{opacity:.35;cursor:default;transform:none}
.ed-mc[disabled]:hover{background:rgba(12,12,14,.78)}
.ed-del-media{font-size:17px}
.ed-del-media:hover{background:#e0384a}

/* dock controls, only while editing */
.ed-dock .dock-item{position:relative;overflow:visible}
/* sits above the tooltip, so the tile name stays readable while editing */
.ed-dock-ctl{
  position:absolute;left:50%;bottom:calc(100% + 46px);transform:translateX(-50%);
  display:flex;gap:3px;opacity:0;pointer-events:none;z-index:6;
  transition:opacity .15s;
}
.ed-dock .dock-item:hover .ed-dock-ctl{opacity:1;pointer-events:auto}
/* invisible bridge down to the tile, so moving the mouse up to the buttons
   never leaves the tile's hover and makes them vanish mid-journey */
.ed-dock-ctl::after{
  content:"";position:absolute;left:-24px;right:-24px;top:100%;height:60px;
}
.ed-dc{
  width:24px;height:24px;border-radius:7px;border:0;cursor:pointer;
  background:rgba(12,12,14,.84);color:#fff;font-size:13px;line-height:1;
  display:grid;place-items:center;transition:background .15s;
}
.ed-dc:hover{background:var(--accent)}
.ed-dc-x:hover{background:#e0384a}
.ed-dock-add{
  width:48px;height:48px;border-radius:12px;margin-left:4px;flex:none;
  border:1.5px dashed rgba(10,108,255,.6);background:rgba(10,108,255,.08);
  color:var(--accent);font-size:24px;line-height:1;cursor:pointer;
  transition:background .15s,transform .2s var(--ease);
}
.ed-dock-add:hover{background:rgba(10,108,255,.16);transform:translateY(-4px)}

/* an image that can be swapped */
.ed-on [data-edit-img]{cursor:copy;transition:outline-color .15s,filter .15s;outline:2px solid transparent;outline-offset:2px}
.ed-on [data-edit-img]:hover{outline-color:var(--accent);filter:brightness(.94)}

@media (max-width:720px){ .ed-bar{display:none} }

/* ---------- Serena, the cursor pet ---------- */
.pet{
  position:absolute;left:0;top:0;width:32px;height:32px;z-index:55;
  pointer-events:none;image-rendering:pixelated;
  background-repeat:no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));
  will-change:transform;
}

.pet-toggle{
  position:absolute;left:16px;bottom:16px;z-index:62;
  display:flex;align-items:center;gap:9px;
  padding:6px 10px 6px 12px;border:0;cursor:pointer;
  border-radius:999px;
  background:rgba(20,20,22,.42);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 1px 2px rgba(0,0,0,.18),inset 0 0 0 .5px rgba(255,255,255,.22);
  color:#fff;font:500 12px/1 var(--font);letter-spacing:.1px;
  transition:background .2s,transform .2s var(--ease);
}
.pet-toggle:hover{background:rgba(20,20,22,.56);transform:translateY(-1px)}
.pet-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pet-toggle-label{opacity:.94;white-space:nowrap}

.pet-switch{
  position:relative;width:30px;height:17px;border-radius:999px;flex:none;
  background:rgba(255,255,255,.26);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28);
  transition:background .22s var(--ease);
}
.pet-switch i{
  position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform .22s var(--ease);
}
.pet-toggle.on .pet-switch{background:#34c759}
.pet-toggle.on .pet-switch i{transform:translateX(13px)}

@media (max-width:720px){ .pet,.pet-toggle{display:none} }