/* MOON, rebuilt from the Wix build (itsonlybloodymoon.wixsite.com/my-site).
   One screen, never scrolls. Everything is sized in design pixels: --px is one pixel of a
   1920 x 1080 picture, or a 640 x 1180 picture on a touch screen held upright, scaled to fit the window. */

@font-face{font-family:"Mulish";src:url(/fonts/mulish-latin.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url(/fonts/rubik-latin.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}

:root{
  --vh:100vh;
  --px:min(calc(100vw / 1920), calc(var(--vh) / 1080));
  --cw:1920;--ch:1080;
  --light:"Avenir Next","Avenir","Mulish",system-ui,sans-serif;
  --ink:#fff;--soft:#e8e6e6;transition:none;
}
@supports (height:100dvh){:root{--vh:100dvh}}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){
  :root{--px:min(calc(100vw / 640), calc(var(--vh) / 1180));--cw:640;--ch:1180}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;touch-action:manipulation}
input,textarea,select{-webkit-user-select:text;user-select:text}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--ink)}
body{font-family:var(--light);font-weight:300;overscroll-behavior:none;text-shadow:0 0 10px rgba(0,0,0,.35)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,p{margin:0;font-weight:inherit}
img{display:block}
:focus-visible{outline:1px solid #fff;outline-offset:3px}

.stage{position:fixed;inset:0;overflow:hidden}

/* background: the newspaper TV loop, with the fine diagonal line screen Wix laid over it */
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
#bg{background:#111 url(/assets/img/poster-1280.webp) center/cover no-repeat}
.bg.on{opacity:1}
.bg-lines{position:absolute;inset:0;pointer-events:none;
  background:url(/assets/img/lines.png) 0 0/6px 6px repeat;image-rendering:pixelated}

/* PHONE LAYOUT: a touch screen held upright, or any window at least 1.25 times taller than it is
   wide (a thin desktop window), gets the 640 x 1180 phone canvas. Everything else keeps the
   1920 x 1080 canvas and simply scales. */
/* the canvas: a centred design-sized box that every panel is laid out in */
.centre,.panel{position:absolute;left:50%;top:50%;width:calc(var(--cw) * var(--px));height:calc(var(--ch) * var(--px));transform:translate(-50%,-50%)}

/* centre title: DANNY over FRIEND, offset, in the MOON face */
.centre{pointer-events:none;transition:opacity .45s ease}
.name{position:absolute;inset:0;margin:0;font-family:"Rubik",sans-serif;font-style:italic;font-weight:500;font-size:calc(68 * var(--px));line-height:1;letter-spacing:0}
.name span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.n1{top:calc(466 * var(--px))}
.n2{top:calc(540 * var(--px))}
.by{position:absolute;left:50%;top:calc(434 * var(--px));transform:translateX(-50%);white-space:nowrap;font-family:var(--light);font-weight:400;font-size:calc(14 * var(--px));letter-spacing:.42em;padding-left:.42em;
  text-shadow:0 0 2px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.6),0 1px 1px rgba(0,0,0,.5)}  /* full strength, still the thin face, with a tight shadow so it reads on any background */
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){
  .name{font-size:calc(80 * var(--px))}
  .n1{top:calc(500 * var(--px))}
  .n2{top:calc(588 * var(--px))}
  .by{top:calc(462 * var(--px));font-size:calc(17 * var(--px))}
  body[data-open="work"] .centre,body[data-open="about"] .centre,body[data-open="bio"] .centre,body[data-open="cv"] .centre{opacity:0}
  body[data-open="view"] .w-mr,body[data-open="view"] .w-ml{opacity:0;pointer-events:none}
  body[data-open] .socials,body[data-open="about"] .w-mr,body[data-open="work"] .w-mr,body[data-open="work"] .w-ml,body[data-open="about"] .w-ml,body[data-open="bio"] .w-ml,body[data-open="bio"] .w-mr,body[data-open="cv"] .w-ml,body[data-open="cv"] .w-mr{opacity:0;pointer-events:none}
}

/* the seven words, pinned to the window edges */
.word{position:absolute;z-index:3;font-size:max(13px,calc(25 * var(--px)));letter-spacing:.1em;line-height:1;
  padding:calc(7 * var(--px)) calc(9 * var(--px)) calc(8 * var(--px));border:1px solid transparent;transition:background .25s,border-color .25s,opacity .35s}
.word:hover{border-color:color-mix(in srgb,var(--ink) 85%,transparent)}
.word[aria-pressed="true"]{background:#000;border-color:#fff}
.word.idle{cursor:default}
.word.idle:hover{border-color:transparent}
.w-tl,.w-tc,.w-tr{top:calc(14 * var(--px))}
.w-bl,.w-bc,.w-br{bottom:calc(18 * var(--px))}
.w-tl,.w-bl,.w-ml{left:calc(18 * var(--px))}
.w-tr,.w-br,.w-mr{right:calc(18 * var(--px))}
.w-tc,.w-bc{left:50%;transform:translateX(-50%)}
.w-mr,.w-ml{top:50%;transform:translateY(-50%)}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){.word{font-size:max(14px,calc(30 * var(--px)))}}

.mood-now{position:absolute;z-index:3;left:50%;bottom:calc(64 * var(--px));transform:translate(-50%,6px);margin:0;white-space:nowrap;
  font-family:Arial,Helvetica,sans-serif;font-size:max(11px,calc(15 * var(--px)));letter-spacing:.12em;color:var(--soft);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s}
.mood-now.on{opacity:1;transform:translate(-50%,0)}
.socials{position:absolute;z-index:3;transition:opacity .35s ease;left:calc(30 * var(--px));top:50%;transform:translateY(-50%);display:grid;gap:calc(10 * var(--px))}
.socials a{display:block;width:max(22px,calc(26 * var(--px)));height:max(22px,calc(26 * var(--px)));transition:transform .25s}
.socials a:hover{transform:scale(1.15)}
.socials img{width:100%;height:100%}

/* panels: one open at a time, faded and slid in */
.panel{z-index:2;opacity:0;transition:opacity .45s ease}
.panel[hidden]{display:block;visibility:hidden}
.panel.on{opacity:1;visibility:visible}
/* bio, about and CV: the box rolls down from just under the top words (never above them)
   and stops above EDITED BY; it rolls back up the same way. The panel stays visible until
   the roll up has finished */
.p-bio,.p-about,.p-cv{opacity:1;visibility:hidden;transition:visibility 0s linear .35s}
.p-bio.on,.p-about.on,.p-cv.on{visibility:visible;transition:visibility 0s}

/* about */
/* the slot: a window just under the top words, down to above EDITED BY; the box slides
   down out of its top edge like post through a letterbox, and back up into it */
/* the slot's top is set from the window edge (where the top words are pinned), not the canvas,
   so it sits snug under the words at any window shape; its bottom stays above EDITED BY */
.slot{--top:calc(max(13px, 25 * var(--px)) + 29 * var(--px) + 8px - (var(--vh) - var(--ch) * var(--px)) / 2);
  position:absolute;left:calc(113 * var(--px));top:var(--top);width:calc(1694 * var(--px));height:calc(420 * var(--px) - var(--top));overflow:hidden;pointer-events:none}
.about-box{position:absolute;left:0;top:0;width:100%;max-height:100%;pointer-events:auto;
  padding:calc(40 * var(--px)) calc(76 * var(--px));overflow:auto;scrollbar-width:none;
  background:rgba(255,255,255,.07);border:1px solid color-mix(in srgb,var(--ink) 70%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  font-size:calc(22 * var(--px));line-height:1.65;transform:translateY(-101%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.about-box::-webkit-scrollbar{display:none}
/* bio is set in the title face (DANNY FRIEND): Rubik medium italic */
#p-bio .about-box p{font-family:"Rubik",sans-serif;font-style:italic;font-weight:500;letter-spacing:0}
.on .about-box{transform:none}
.about-box p{max-width:62em}
.about-box{font-weight:400;text-shadow:0 0 2px rgba(0,0,0,.45),0 1px 1px rgba(0,0,0,.4)}  /* a step up from the light body weight so it reads on the glass */
.about-box p+p{margin-top:.9em}
.about-box.open{columns:2;column-gap:calc(90 * var(--px));font-size:calc(20 * var(--px));line-height:1.6}
.about-box.open p,.about-box.open li{break-inside:avoid}
.more p{margin-top:1.1em}
.notes-h{margin-top:1.4em!important;letter-spacing:.04em}
.notes{counter-reset:n;margin-top:.5em}
.notes li{counter-increment:n;padding-left:1.6em;position:relative;margin-top:.55em}
.notes li::before{content:counter(n) ".";position:absolute;left:0}
.foot{font-family:ui-monospace,Menlo,monospace;font-size:.86em;letter-spacing:.02em}
.tsrl{margin-top:calc(26 * var(--px));font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:calc(18 * var(--px));letter-spacing:.1em;text-decoration:underline;text-underline-offset:.3em}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){
  .slot{--top:calc(max(14px, 30 * var(--px)) + 29 * var(--px) + 8px - (var(--vh) - var(--ch) * var(--px)) / 2);left:calc(28 * var(--px));width:calc(584 * var(--px));height:calc(448 * var(--px) - var(--top))}
  .about-box{padding:calc(34 * var(--px));font-size:calc(21 * var(--px));line-height:1.55}
  .about-box.open{columns:auto;
    -webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent);padding-bottom:calc(90 * var(--px))}
  .tsrl{font-size:calc(20 * var(--px))}
}

/* work */
.col{position:absolute}
.col h2{font-size:calc(19 * var(--px));line-height:1.2;margin-bottom:calc(16 * var(--px))}
.col li{font-family:Arial,Helvetica,sans-serif;font-size:calc(20 * var(--px));letter-spacing:.1em;color:var(--soft);line-height:calc(39 * var(--px));white-space:nowrap;
  transform:translateY(8px);opacity:0;transition:opacity .5s ease,transform .5s ease}
.on .col li{transform:none;opacity:1}
.on .col li:nth-child(2){transition-delay:.03s}.on .col li:nth-child(3){transition-delay:.06s}.on .col li:nth-child(4){transition-delay:.09s}
.on .col li:nth-child(5){transition-delay:.12s}.on .col li:nth-child(6){transition-delay:.15s}.on .col li:nth-child(7){transition-delay:.18s}
.on .col li:nth-child(8){transition-delay:.21s}.on .col li:nth-child(9){transition-delay:.24s}
.c-mv{left:calc(222 * var(--px));top:calc(295 * var(--px))}
.c-ad{left:calc(460 * var(--px));top:calc(295 * var(--px))}
.c-pr{left:calc(1331 * var(--px));top:calc(214 * var(--px))}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){
  .col h2{font-size:calc(22 * var(--px))}
  .col li{font-size:calc(21 * var(--px));line-height:calc(36 * var(--px))}
  .c-mv{left:calc(40 * var(--px));top:calc(130 * var(--px))}
  .c-ad{left:calc(330 * var(--px));top:calc(130 * var(--px))}
  .c-pr{left:calc(40 * var(--px));top:calc(610 * var(--px))}
  .c-pr li{white-space:normal;line-height:1.25;margin-bottom:calc(11 * var(--px));max-width:calc(270 * var(--px))}
}

/* work: the reel, 18 either side of the title */
.reel{position:absolute;top:calc(144 * var(--px));display:grid;grid-auto-rows:calc(44 * var(--px));align-items:center}
.r-left{right:calc(1210 * var(--px));text-align:right}
.r-right{left:calc(1190 * var(--px))}
.reel li{font-family:Arial,Helvetica,sans-serif;font-size:calc(19 * var(--px));letter-spacing:.1em;color:var(--soft);white-space:nowrap;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0) * 22ms)}
.on .reel li{opacity:1;transform:none}
.reel button{letter-spacing:inherit;text-align:inherit;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.reel button:hover,.reel button:focus-visible{color:var(--ink);border-bottom-color:color-mix(in srgb,var(--ink) 80%,transparent)}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){
  .reel{top:calc(150 * var(--px));grid-auto-rows:auto;gap:calc(13 * var(--px));width:calc(282 * var(--px))}
  .r-left{right:auto;left:calc(24 * var(--px))}
  .r-right{left:calc(334 * var(--px))}
  .reel li{font-size:calc(16 * var(--px));white-space:normal;line-height:1.25}
}

/* view: every film as a small moving tile; the name steps aside */
body[data-open="view"] .centre{opacity:0}
.tiles{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;
  grid-template-columns:repeat(6,calc(224 * var(--px)));grid-auto-rows:calc(126 * var(--px));gap:calc(14 * var(--px))}
.tile{position:relative;overflow:hidden;background:#0b0b0b;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);
  opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease,border-color .25s;transition-delay:calc(var(--i,0) * 14ms)}
.on .tile{opacity:1;transform:none}
.tile video,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.tile .tl{position:absolute;left:0;right:0;bottom:0;padding:calc(18 * var(--px)) calc(8 * var(--px)) calc(6 * var(--px));text-align:left;
  font-family:Arial,Helvetica,sans-serif;font-size:calc(11 * var(--px));letter-spacing:.1em;line-height:1.2;color:var(--ink);
  background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .25s}
.tile:hover,.tile:focus-visible{border-color:var(--ink)}
.tile:hover .tl,.tile:focus-visible .tl{opacity:1}
.tile.soon{display:grid;place-items:center}
.tile.soon .tl{position:static;background:none;opacity:1;text-align:center;padding:0 calc(8 * var(--px))}
@media (hover:none){.tile .tl{opacity:1}}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){
  .tiles{grid-template-columns:repeat(4,calc(140 * var(--px)));grid-auto-rows:calc(79 * var(--px));gap:calc(10 * var(--px));top:calc(600 * var(--px))}
  .tile .tl{font-size:calc(10 * var(--px));padding:calc(10 * var(--px)) calc(5 * var(--px)) calc(4 * var(--px))}
}

/* vibe: thumbnails of the backgrounds, above and below the name */
.vthumbs{position:absolute;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,calc(160 * var(--px)));gap:calc(18 * var(--px))}
.vt-top{top:calc(150 * var(--px))}
.vt-bot{top:calc(640 * var(--px))}
.vthumbs button{position:relative;aspect-ratio:16/9;background:#111 center/cover no-repeat;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,border-color .25s}
.on .vthumbs button{opacity:1;transform:none}
.vthumbs button:hover,.vthumbs button[aria-pressed="true"]{border-color:var(--ink)}
.vthumbs button[aria-pressed="true"]::after{content:"";position:absolute;inset:3px;border:1px solid var(--ink)}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){
  .vthumbs{grid-template-columns:repeat(3,calc(168 * var(--px)));gap:calc(14 * var(--px))}
  .vt-top{top:calc(110 * var(--px))}
  .vt-bot{top:calc(690 * var(--px))}
}

/* style: the colours sit exactly where the mood tracks do (same rows above and below the name) */
.chip{flex:none;width:calc(40 * var(--px));height:calc(40 * var(--px));border:1px solid rgba(255,255,255,.35)}
.swatches button[aria-pressed="true"] .tt{border-bottom-color:color-mix(in srgb,var(--ink) 80%,transparent)}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){.chip{width:calc(48 * var(--px));height:calc(48 * var(--px))}}

/* mood: the music, above and below the title */
.tracks{position:absolute;left:calc(737 * var(--px));display:grid;gap:calc(13 * var(--px))}
.t-top{top:calc(140 * var(--px))}
.t-bot{top:calc(628 * var(--px))}
.tracks button{display:flex;align-items:center;gap:calc(16 * var(--px));height:calc(40 * var(--px));max-width:calc(620 * var(--px));text-align:left;
  font-size:calc(18 * var(--px));opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s ease}
.on .tracks button{opacity:1;transform:none}
.cov{flex:none;width:calc(40 * var(--px));height:calc(40 * var(--px));background:#222 center/cover no-repeat}
.ico{flex:none;width:calc(18 * var(--px));height:calc(20 * var(--px));background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M0 0l18 10L0 20z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M0 0l18 10L0 20z'/%3E%3C/svg%3E") center/contain no-repeat}
.playing .ico{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M1 0h5v20H1zM12 0h5v20h-5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M1 0h5v20H1zM12 0h5v20h-5z'/%3E%3C/svg%3E")}
.tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .25s}
.tracks button:hover .tt,.playing .tt{border-bottom-color:color-mix(in srgb,var(--ink) 80%,transparent)}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){
  .tracks{left:calc(52 * var(--px));gap:calc(14 * var(--px))}
  .t-top{top:calc(120 * var(--px))}
  .t-bot{top:calc(690 * var(--px))}
  .tracks button{height:calc(48 * var(--px));max-width:calc(540 * var(--px));font-size:calc(22 * var(--px));gap:calc(16 * var(--px))}
  .cov{width:calc(48 * var(--px));height:calc(48 * var(--px))}
  .ico{width:calc(18 * var(--px));height:calc(20 * var(--px))}
}

/* mood: stop the music, above the track list */
.stopm{position:absolute;left:calc(737 * var(--px));top:calc(84 * var(--px));display:flex;align-items:center;gap:calc(16 * var(--px));height:calc(40 * var(--px));
  font-size:calc(18 * var(--px));opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s ease}
.on .stopm{opacity:1;transform:none}
.stopm .sq{flex:none;width:calc(40 * var(--px));height:calc(40 * var(--px));border:1px solid color-mix(in srgb,var(--ink) 60%,transparent);position:relative}
.stopm .sq::after{content:"";position:absolute;inset:32%;background:currentColor}
.stopm:hover .tt{border-bottom-color:color-mix(in srgb,var(--ink) 80%,transparent)}
.stopm.idle-stop{color:var(--soft)}
.on .stopm.idle-stop{opacity:.45}

/* custom player bar: click or drag anywhere on the line to jump */
.vstage{position:relative;background:#000}
.vstage .viewer-video{cursor:pointer}
.vbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:28px 14px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));opacity:1;transition:opacity .3s;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.06em}
.vstage.idle .vbar{opacity:0}
.vstage.idle{cursor:none}
.vbtn{flex:none;width:28px;height:28px;position:relative;opacity:.85}
.vbtn:hover{opacity:1}
.vbtn::before{content:"";position:absolute;inset:4px;background:#fff;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.vplay{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E")}
.vstage.paused .vplay{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E")}
.vmute{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.vstage.muted .vmute{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.vfull{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9V3h6M15 3h6v6M21 15v6h-6M9 21H3v-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.vstage.is-full .vfull{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v6H3M21 9h-6V3M15 21v-6h6M3 15h6v6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.vtime{flex:none;min-width:3.4em;text-align:center;color:#ddd;font-variant-numeric:tabular-nums}
.vtrack{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none}
.vtrack::before,.vbuf,.vfill{content:"";position:absolute;left:0;top:50%;height:2px;margin-top:-1px;border-radius:1px}
.vtrack::before{right:0;background:rgba(255,255,255,.25)}
.vbuf{background:rgba(255,255,255,.35);width:0}
.vfill{background:#fff;width:0}
.vknob{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;transform:scale(.7);transition:transform .15s}
.vtrack:hover .vknob,.vtrack.drag .vknob{transform:scale(1)}
.vstage:fullscreen{display:grid;place-items:center;width:100vw;height:100vh}
.vstage:fullscreen .viewer-video{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.vstage:-webkit-full-screen{width:100vw;height:100vh}
.vstage:-webkit-full-screen .viewer-video{width:100%;height:100%;max-height:none;object-fit:contain}

/* the viewer: a clean player in the centre, native controls (fullscreen included) */
.viewer{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(0,0,0,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s ease}
.viewer[hidden]{display:grid;visibility:hidden;pointer-events:none}
.viewer.on{opacity:1;visibility:visible}
.viewer-box{--ar:16/9;width:min(84vw,calc(.78 * var(--vh) * var(--arn,1.7778)));display:grid;gap:12px;transform:scale(.98);transition:transform .35s ease}
.viewer.on .viewer-box{transform:none}
.viewer-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.viewer-title{font-family:Arial,Helvetica,sans-serif;font-size:max(11px,calc(16 * var(--px)));letter-spacing:.12em;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-x{font-size:max(13px,calc(20 * var(--px)));letter-spacing:.1em;padding:6px 10px;border:1px solid color-mix(in srgb,var(--ink) 60%,transparent);flex:none}
.viewer-x:hover{background:var(--ink);color:#000}
.viewer-soon{margin:0;aspect-ratio:16/9;display:grid;place-items:center;background:#000;border:1px solid rgba(255,255,255,.25);font-size:max(14px,calc(28 * var(--px)));letter-spacing:.3em;padding-left:.3em}
.viewer-soon[hidden]{display:none}
.viewer-video[hidden]{display:none}
.viewer-video{width:100%;aspect-ratio:var(--ar);max-height:calc(.78 * var(--vh));background:#000;display:block}
.viewer-arrow{position:fixed;top:50%;width:max(44px,calc(56 * var(--px)));height:max(64px,calc(96 * var(--px)));transform:translateY(-50%);opacity:.75;transition:opacity .2s}
.viewer-arrow::before{content:"";position:absolute;inset:18% 30%;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M20 2L4 24l16 22'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M20 2L4 24l16 22'/%3E%3C/svg%3E") center/contain no-repeat}
.viewer-arrow:hover,.viewer-arrow:focus-visible{opacity:1}
.viewer-prev{left:max(4px,calc(28 * var(--px)))}
.viewer-next{right:max(4px,calc(28 * var(--px)))}
.viewer-next::before{transform:scaleX(-1)}
@media (orientation:portrait){
  .viewer-arrow{top:auto;bottom:max(12px,calc(60 * var(--px)));transform:none}
  .viewer-prev{left:calc(50% - max(64px,calc(90 * var(--px))))}
  .viewer-next{right:calc(50% - max(64px,calc(90 * var(--px))))}
}
@media (orientation:portrait){.viewer-box{width:min(92vw,calc(.64 * var(--vh) * var(--arn,1.7778)))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ===== PHONE APP LAYOUT (touch screen held upright, or a thin window) =====================================
   Top bar: just a menu button on the right, holding work, view, bio, about and past.
   Home: just EDITED BY / DANNY FRIEND. work: its own page, the titles in two columns, no scrolling.
   view: one tile per row, scrolls. Bottom: vibe / mood / style as app buttons. */
.df,.burger,.menu-bg,.tabbar,.bi{display:none}
@media (orientation:portrait) and (pointer:coarse),(max-aspect-ratio:4/5){
  :root{--bar:64px;--topbar:60px}
  .word{font-size:15px;padding:8px 12px}

  /* top bar: the DF logo on the left (taps back home), the menu button on the right */
  .df{display:block;position:absolute;z-index:6;left:12px;top:8px;height:44px;padding:0 4px;
    font-family:"Rubik",sans-serif;font-style:italic;font-weight:500;font-size:26px;line-height:44px;letter-spacing:0}
  .burger{display:block;position:absolute;z-index:6;right:8px;top:8px;width:44px;height:44px}
  .burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);border-radius:1px;transition:transform .25s,opacity .2s}
  .burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
  body.menu .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu .burger span:nth-child(2){opacity:0}
  body.menu .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .socials{display:none}

  /* the menu: work, view, bio, about and past drop down under the menu button */
  .menu-bg{display:block;position:absolute;z-index:4;right:8px;top:56px;width:140px;height:236px;
    background:rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s,transform .2s}
  html body .w-mr,html body .w-ml,html body .w-tl,html body .w-tc,html body .w-tr{z-index:5;right:16px;left:auto;transform:translateY(-8px);font-size:18px;opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s,background .25s,border-color .25s}
  .w-mr{top:64px}.w-ml{top:108px}.w-tl{top:152px}.w-tc{top:196px}.w-tr{top:240px}
  html body.menu .w-mr,html body.menu .w-ml,html body.menu .w-tl,html body.menu .w-tc,html body.menu .w-tr,body.menu .menu-bg{opacity:1;transform:none}
  html body.menu .w-mr,html body.menu .w-ml,html body.menu .w-tl,html body.menu .w-tc,html body.menu .w-tr{pointer-events:auto}

  /* bottom app bar */
  .tabbar{display:block;position:absolute;z-index:2;left:0;right:0;bottom:0;height:var(--bar);
    background:rgba(0,0,0,.35);border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .w-bl,.w-bc,.w-br{bottom:0;top:auto;width:33.34%;height:var(--bar);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    padding:0;border:0;font-size:11px;letter-spacing:.14em;transform:none}
  .w-bl{left:0}.w-bc{left:33.33%}.w-br{right:0;left:auto}
  .w-bl[aria-pressed="true"],.w-bc[aria-pressed="true"],.w-br[aria-pressed="true"]{background:color-mix(in srgb,var(--ink) 14%,transparent);border:0}
  .bi{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .w-bl:active .bi,.w-bc:active .bi,.w-br:active .bi{transform:scale(.88)}
  .mood-now{bottom:calc(var(--bar) + 10px)}

  /* centre name */
  .name{font-size:calc(68 * var(--px))}
  .by{top:calc(486 * var(--px));font-size:calc(17 * var(--px))}
  .n1{top:calc(516 * var(--px))}
  .n2{top:calc(590 * var(--px))}

  /* work: its own page; the name steps aside and all 36 titles sit in one column, one line each */
  body[data-open="work"] .centre{opacity:0}
  .reel{left:calc(30 * var(--px));right:auto;width:calc(580 * var(--px));display:grid;grid-template-columns:1fr;
    grid-template-rows:none;grid-auto-flow:row;grid-auto-rows:calc(26 * var(--px));gap:0;align-items:center}
  .r-left{top:calc(100 * var(--px));text-align:center}
  .r-right{top:calc(568 * var(--px));text-align:center}
  .reel li{font-size:calc(22 * var(--px));letter-spacing:.06em;white-space:nowrap;line-height:1}
  .reel button{text-align:center}

  /* bio / about / past: the box drops out from under the top bar, above EDITED BY */
  .slot{--top:calc(var(--topbar) - (var(--vh) - var(--ch) * var(--px)) / 2);left:calc(24 * var(--px));width:calc(592 * var(--px));height:calc(472 * var(--px) - var(--top))}

  /* about / past: the name is hidden while open, so the box can run down to the bottom bar */
  #p-about .slot,#p-cv .slot{height:calc(var(--vh) - var(--topbar) - var(--bar) - 12px)}
  #p-about .about-box,#p-cv .about-box{font-size:calc(26 * var(--px));line-height:1.55}

  /* bio: no box, just the line in the middle of the screen, larger, fading in */
  #p-bio .slot{top:0;height:100%;left:calc(40 * var(--px));width:calc(560 * var(--px))}
  #p-bio .about-box{top:50%;max-height:none;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;
    text-align:center;font-size:calc(36 * var(--px));line-height:1.45;letter-spacing:.02em;
    opacity:0;transform:translateY(-44%);transition:opacity .35s ease,transform .35s cubic-bezier(.4,0,.2,1)}
  #p-bio.on .about-box{opacity:1;transform:translateY(-50%)}

  /* mood / style lists: slightly tighter rows so the lower list always clears the bottom bar */
  .tracks{gap:calc(10 * var(--px))}
  .t-bot{top:calc(672 * var(--px))}
  .t-top{top:calc(172 * var(--px))}
  .stopm{left:calc(52 * var(--px));top:calc(112 * var(--px));height:calc(42 * var(--px));font-size:calc(22 * var(--px))}
  .stopm .sq{width:calc(42 * var(--px));height:calc(42 * var(--px))}
  .tracks button{height:calc(42 * var(--px))}
  .cov,.chip{width:calc(42 * var(--px));height:calc(42 * var(--px))}

  /* view: every film full width, one under another, scrolls between the bars */
  .p-view{left:0;top:0;width:100%;height:100%;transform:none}
  .tiles{position:absolute;left:0;right:0;top:var(--topbar);bottom:var(--bar);transform:none;display:grid;grid-template-columns:1fr;grid-auto-rows:calc((100vw - 28px) * 9 / 16);gap:12px;
    padding:4px 14px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none}
  .tiles::-webkit-scrollbar{display:none}
  .tile{width:100%;height:100%;transition-delay:0s}
  .tile .tl{font-size:12px;padding:22px 10px 8px;opacity:1}
}