/* Home: a poster headline, the featured piece, then the list of case studies.
   Hover a title and its cover fills the room behind it, with a line on what it was. */

.top{position:fixed;left:0;right:0;top:0;z-index:30;pointer-events:none}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:calc(env(safe-area-inset-top,0px) + 14px);padding-bottom:14px;max-width:none}
.top .wrap > *{pointer-events:auto}

/* covers behind the list: hidden until a title is hovered */
.bgs{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity .5s;pointer-events:none}
.home.hot .bgs{opacity:1}
.bgs div{position:absolute;inset:0;background:var(--img) center/cover no-repeat,var(--c);opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.bgs div.on{opacity:1;transform:none}
.bgs::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(var(--f-veil),.82)}
.home .wrap{position:relative;z-index:1}

/* the headline */
.lead{position:relative;min-height:calc(100vh - clamp(110px,16vh,180px));min-height:calc(100svh - clamp(110px,16vh,180px));display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(32px,5vh,56px)}
.lead h1{font-size:clamp(48px,7vw,138px);font-weight:500;letter-spacing:-.05em;line-height:.88;color:var(--f-strong);margin-bottom:clamp(28px,5vh,60px)}
.lead .ln{display:block;overflow:hidden;padding:.04em .1em .16em 0;margin:-.04em 0 -.16em 0}
.lead .ln span{display:block;transform:translateY(110%)}
.entered .lead .ln span{animation:rise 1.1s var(--ease) forwards}
html:not(.js) .lead .ln span{transform:none}
.lead .ln:nth-child(2) span{animation-delay:.12s}
.lead .ln:nth-child(3) span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.lead .under{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;border-top:1px solid var(--f-line);padding-top:22px;opacity:0}
.entered .lead .under{animation:fadein .8s .7s var(--ease) forwards}
html:not(.js) .lead .under{opacity:1}
@keyframes fadein{to{opacity:1}}
.lead p{color:var(--f-muted);font-size:clamp(18px,1.8vw,26px)}

/* the scroll arrow: a faint arrow with a run of brighter ink sliding down it, on a seamless loop.
   Five copies of the run, each shorter than the last and sharing the same leading edge, make a tail that fades */
.down{color:var(--f-strong);display:block;line-height:0;margin-bottom:4px}
.down svg{display:block}
.down .dim{opacity:.4}
.down .ink path{stroke-dasharray:calc(var(--t,36px) * var(--f)) calc(var(--t,36px) * (1 - var(--f)));stroke-dashoffset:calc(var(--t,36px) * (var(--f) - .46));animation:draw 2.2s linear infinite}
@keyframes draw{
  from{stroke-dashoffset:calc(var(--t,36px) * (var(--f) - .46))}
  to{stroke-dashoffset:calc(var(--t,36px) * (var(--f) - .46) - var(--t,36px))}
}
@media (prefers-reduced-motion:reduce){ .down .ink{display:none} .down .dim{opacity:1} }

/* the featured piece */
.feat{padding-top:clamp(20px,3vh,36px)}
.feat .fp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:end;position:relative;overflow:hidden;border-radius:14px;background:var(--c);color:#fff;text-decoration:none;padding:clamp(28px,4vw,56px);min-height:min(70vh,640px);transition:transform .6s var(--ease)}
.feat a.fp:hover{transform:translateY(-4px)}
.feat i{position:absolute;inset:0;background:var(--img) center/cover no-repeat;opacity:.9}
.feat .fx,.feat p{position:relative}
.feat .k{display:block;font-size:14px;opacity:.75;margin-bottom:12px}
.feat h2{font-size:clamp(44px,7vw,120px);font-weight:500;letter-spacing:-.04em;line-height:.92}
.feat p{max-width:46ch;font-size:clamp(17px,1.5vw,22px);opacity:.9}
.feat .go{display:inline-flex;align-items:center;margin-top:22px;border:1px solid rgba(255,255,255,.5);border-radius:999px;min-height:40px;padding:0 18px;font-size:15px}
.feat .go{--sw:#fff}
.feat a.fp:hover .go{color:var(--c)}
.feat .go.soon{opacity:.7}

/* the list: one full-width column, one row per project, the whole row is the link */
.pin{padding-block:10vh}
.list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.list .row{display:inline-block;padding:3px 0;text-decoration:none;color:inherit}
.list .row .t{display:inline-block;font-size:clamp(26px,min(4vw,5.4vh),60px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:color-mix(in srgb,var(--f-muted) 65%,transparent);transition:color .3s,transform .5s var(--ease);transform-origin:left}
.list .row:focus-visible{outline:2px solid var(--f-accent);outline-offset:4px}
.list .row.on .t{color:var(--f-strong);transform:translateX(12px)}
@media (max-width:720px){
  .lead h1{font-size:clamp(28px,8.4vw,58px)}
  .lead .under{flex-direction:column;align-items:flex-start;gap:14px}
  .lead p br{display:none}
  .feat .fp{grid-template-columns:1fr;min-height:60vh;gap:20px}
  .list .row{padding:5px 0}
}

/* the header settles in with the headline */
.js .top{opacity:0;transition:opacity .8s .3s var(--ease)}
.entered .top{opacity:1}
/* list titles rise one after another as the list comes into view */
.js .list li{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.js .list.seen li{opacity:1;transform:none}

/* group headings in the list, and the work-in-progress note above it */
.list .grp{font-size:15px;color:var(--f-muted);letter-spacing:0;padding:28px 0 8px}
.list .grp:first-child{padding-top:0}
.wip{max-width:44ch;font-size:15px;color:var(--f-muted);border-left:2px solid var(--f-accent);padding-left:14px;margin-bottom:40px}

/* the opening: a field of dots, like the board's canvas, that drifts gently and parts around the cursor */
.lead .field{position:absolute;top:0;bottom:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s .5s var(--ease)}
.entered .lead .field{opacity:1}
.lead h1,.lead .under{position:relative;z-index:1}

/* the glow that trails the mouse around the work area */
.pin{position:relative}
.pin > .col{position:relative;z-index:1}
.trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.trail i{position:absolute;left:-320px;top:-320px;width:640px;height:640px;border-radius:50%;--k:9%;background:radial-gradient(circle,color-mix(in srgb,var(--f-text) var(--k),transparent) 0,color-mix(in srgb,var(--f-text) calc(var(--k) * .45),transparent) 35%,transparent 70%);will-change:transform}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .trail i{--k:5%} }
:root[data-theme="light"] .trail i{--k:5%}
/* phones and tablets: nothing gets hovered, so the titles are full strength */
@media (hover:none){ .list .row .t{color:var(--f-strong)} }
/* * next to projects still missing content */
.todo{font-size:.45em;font-weight:400;vertical-align:super;margin-left:.15em;color:var(--f-accent);letter-spacing:0}
.feat .todo{color:inherit;opacity:.8}
/* a small lock next to password-protected projects */
.lock{display:inline-block;width:.32em;margin-left:.22em;vertical-align:.08em;color:var(--f-muted);opacity:.85}
.lock svg{display:block;width:100%;height:auto}
.list .row.on .lock{color:var(--f-strong)}
.feat .lock{color:inherit}

/* the featured piece peeks up under the opening, so it fades in with it rather than waiting to be scrolled to */
.js .feat{opacity:0;transform:translateY(28px)}
.entered .feat{animation:featin 1s .85s var(--ease) forwards}
@keyframes featin{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .js .feat{opacity:1;transform:none;animation:none} }

/* featured: the words sit together on the left, so a busy cover can fill the right without fighting them */
.feat .fp{align-content:end}
.feat .fx,.feat p{grid-column:1}
.feat p{margin-top:clamp(16px,2vw,24px)}
.feat i{background-position:right center}
.feat i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c) 0,color-mix(in srgb,var(--c) 70%,transparent) 32%,transparent 58%)}
@media (max-width:720px){
  .feat i{background-position:70% center}
  .feat i::after{background:linear-gradient(0deg,var(--c) 0,color-mix(in srgb,var(--c) 80%,transparent) 40%,transparent 75%)}
}

/* phones: the featured piece stacks. The cover sits on top as its own picture, then the words underneath
   on the project colour, so nothing is laid over a busy image */
@media (max-width:720px){
  .feat .fp{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:0;padding:0;border-radius:12px}
  .feat i{position:relative;inset:auto;display:block;aspect-ratio:5 / 4;opacity:1;background-size:auto 118%;background-position:66% 30%}
  .feat i::after{background:linear-gradient(0deg,var(--c) 0,transparent 28%)}
  .feat .fx{padding:4px 22px 0}
  .feat p{margin-top:12px;padding:0 22px 24px;font-size:17px;max-width:none}
  .feat .k{font-size:13px;margin-bottom:6px}
  .feat h2{font-size:clamp(40px,12vw,56px)}
  .feat .go{margin-top:18px}
}

/* phones: a bigger headline */
@media (max-width:720px){
  .lead h1{font-size:clamp(30px,10vw,58px);line-height:.92}
}

/* desktop: the featured cover sits to the right at full height, so the artwork clears the words */
@media (min-width:721px){
  .feat i{background-image:var(--imgw,var(--img));background-size:auto 124%;background-position:right 42%}
}
@media (min-width:721px) and (max-width:1200px){ .feat i{background-size:auto 106%;background-position:right 45%} }

/* a project's own logo in place of its name on the featured panel */
.feat h2 .logo{display:block;height:clamp(84px,10vw,150px);width:auto;margin:6px 0 4px -.04em}
@media (max-width:720px){ .feat h2 .logo{height:72px} }

/* how I work: four short pieces after the work list */
.how{position:relative;z-index:1;padding-block:clamp(40px,8vh,96px) clamp(64px,12vh,140px)}
.how h2{font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--f-strong);margin:0}
.how-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,72px) clamp(32px,6vw,96px);margin-top:clamp(36px,5vw,64px)}
.how-g > div{border-top:1px solid var(--f-line);padding-top:20px}
.how h3{font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.01em;color:var(--f-strong);margin:0}
.how p{margin:12px 0 0;color:var(--f-muted);font-size:clamp(16px,1.2vw,18px);line-height:1.6;max-width:58ch}
@media (max-width:720px){ .how-g{grid-template-columns:1fr} }

.feat p .k{margin-bottom:8px}