/* Hailey Deng — built from design/DESIGN-SPEC.md + design/design-book.html */
:root{
  color-scheme:light;
  --paper:#F5F4F0;--ink:#141412;--g1:#8A8883;--g2:#DAD8D2;--accent:#E8502F;
  --sans:"Instrument Sans",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --m:24px;--bar:44px;--gap:16px;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 13px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}

/* ---- fixed bars ---- */
.top,.bot{position:fixed;left:0;right:0;z-index:50;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center;padding:0 var(--m);background:var(--paper)}
.top{top:0;height:calc(var(--bar) + var(--st));padding-top:var(--st)}
.bot{bottom:0;height:calc(var(--bar) + var(--sb));padding-bottom:var(--sb);border-top:1px solid var(--g2)}
.top .name{grid-column:1/4;justify-self:start;white-space:nowrap}
.top .cap{grid-column:4/10;font:11px var(--sans);color:var(--g1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top nav{grid-column:10/13;display:flex;justify-content:flex-end;gap:18px;white-space:nowrap}
.top .name,.top nav a,.bot a{color:rgba(20,20,18,.55);transition:color .3s var(--ease)}
.top .name.on,.top nav a.on{color:var(--ink)}
@media (hover:hover){.top .name:hover,.top nav a:hover,.bot a:hover{color:var(--ink)}}
/* 44px touch targets without changing the look */
.top .name,.top nav a{padding:13px 0}
.top .name.on::before,.top nav a.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px}
.bot .grp{display:flex;gap:20px;align-items:center;white-space:nowrap}
.bot .l{grid-column:1/8}.bot .r{grid-column:8/13;justify-content:flex-end}
.bot .ic{display:inline-flex;padding:14px 10px;margin:-14px -10px}
.bot .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.bot .copy{color:var(--accent);padding:14px 6px;margin:-14px -6px -14px 0}
/* credit, centred in the bottom bar */
.bot .credit{position:absolute;left:50%;top:0;height:var(--bar);display:flex;align-items:center;transform:translateX(-50%);font:11px var(--sans);color:var(--g1);white-space:nowrap;pointer-events:none}
.bot .clock{font:11px var(--sans);color:var(--g1)}
.bot .clock b{font:400 11px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- crop marks ---- */
.crop{position:fixed;width:14px;height:1px;background:var(--ink);opacity:.35;z-index:49;pointer-events:none}
.crop.l{left:0}.crop.r{right:0}.crop.a{top:26%}.crop.b{top:74%}

main{--pt:28px;padding:calc(var(--bar) + var(--pt) + var(--st)) var(--m) calc(var(--bar) + 24px + var(--sb));min-height:100svh}
.view{animation:in .7s var(--ease) backwards}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.lbl{font:11px var(--sans);color:var(--g1);margin:0 0 10px}

/* =============== HOME =============== */
.home .bio{grid-column:1/5;max-width:40ch;margin:0}
.home .bio p{margin:0 0 1em}
/* left edge of the "off the clock" text = left edge of the portrait inside the centred block */
/* home = three independent zones: the text zone has a fixed height (the original two-paragraph height),
   so editing copy never moves the block or the index */
.home{--top-h:221px;--hero-mt:36px;--blk:min(330px,72vw);grid-template-rows:var(--top-h) auto auto}
.home .hero{grid-row:2;margin-top:var(--hero-mt)}
.home .index{grid-row:3}
/* name, Helvetica Neue like the reference. Left-aligned on the page margin (same vertical line as the bio and the index),
   the lowest point of the descenders (g, y) sitting on the red block's bottom edge, so name and block
   both end exactly 64px above the index. Size follows the home container width and never
   gets closer than 40px to the block. Hover swaps to Times italic, as on the reference site. */
.home{container-type:inline-size}
.wordmark{grid-column:1/13;grid-row:2;align-self:end;justify-self:start;margin:0 0 .125em;text-align:left;font:italic 400 min(104px,7cqi,calc((50cqi - var(--blk)/2 - 40px)/3.9))/.85 "Times New Roman",Times,serif;letter-spacing:-.033em;color:var(--ink)}
.wordmark span{display:block}
@media (hover:hover){.wordmark:hover{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal}}
.home .bio,.home .aside,.home .hl{grid-row:1;align-self:start}
/* starts one third of the way from the red block's left edge to the portrait's left edge;
   on narrow screens (iPad portrait) it never gets closer than 32px to the bio column */
.home .aside{--img:calc((var(--blk) - 12px)*.485);--off:calc(var(--blk)/2 - (var(--blk) - var(--img))/6);--x:max(calc(50% - var(--off)),calc(33.333% + 32px));grid-column:1/13;justify-self:start;margin-left:var(--x);max-width:min(40ch,calc(75% - var(--x) - 8px))}
.home .aside p{margin:0}
.home .aside p+p{margin-top:1em}
.home .hl{grid-column:10/13;font:12px/1.7 var(--sans)}
.home .hl ul{list-style:none;margin:0;padding:0}
.home .hl li{display:grid;grid-template-columns:4ch 1fr;gap:12px}
.home .hl li span{color:var(--g1);font:11px/1.85 var(--mono);font-variant-numeric:tabular-nums}
.hero{grid-column:1/13;margin:36px auto 0;width:min(330px,72vw);aspect-ratio:330/230;background:var(--accent);padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;animation:pop 1s .1s var(--ease) both}
.hero img,.hero a{width:48.5%}
.hero a img{width:100%}
.hero img{object-fit:cover}
.hero .por{aspect-ratio:3/2}
.hero .shot{aspect-ratio:16/10}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.index{grid-column:1/13;display:flex;flex-wrap:wrap;gap:14px;margin-top:48px;align-items:flex-start}
.index a{display:block;height:56px;transition:opacity .45s var(--ease);animation:in .6s var(--ease) backwards;animation-delay:calc(var(--i)*22ms)}
.index img{height:100%;width:auto}
@media (hover:hover){.index:hover a:not(:hover){opacity:.3}}
.index[data-dim] a{opacity:.1}
.index[data-dim="film"] a[data-cat="film"],.index[data-dim="content"] a[data-cat="content"],.index[data-dim="web"] a[data-cat="web"],.index[data-dim="learning"] a[data-cat="learning"]{opacity:1}
.ph{height:56px;aspect-ratio:4/3;border:1px solid var(--g2);display:grid;place-items:center;font:10px var(--sans);color:var(--g1);text-align:center;padding:6px}

/* =============== FILM =============== */
.p-film{overflow:hidden;height:100%}
.p-film main{padding:0;min-height:0}
.film{position:fixed;inset:0;overflow:hidden}
.film .big{position:absolute;left:50%;top:calc(var(--bar) + var(--st));bottom:calc(var(--bar) + var(--sb));transform:translateX(-50%);display:flex;align-items:center}
.film .frame{display:flex}
.film .rebate{flex:none;width:24px;background:var(--ink);color:rgba(255,255,255,.85);font:9px var(--sans);letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;text-orientation:mixed;display:flex;justify-content:space-between;align-items:center;white-space:nowrap;overflow:hidden;padding:8px 0}
.film .frame img{width:auto;height:auto;max-height:calc(100vh - var(--bar)*2 - var(--st) - var(--sb));max-height:calc(100dvh - var(--bar)*2 - var(--st) - var(--sb));max-width:calc(100vw - var(--m)*2 - 24px);transition:opacity .25s var(--ease)}
.film .frame img.fade{opacity:0}
.film .strip{position:absolute;left:0;right:0;top:50%;height:64px;transform:translateY(-50%);overflow:hidden;background:var(--paper);z-index:3}
.film .track{display:flex;width:max-content;animation:roll 120s linear infinite}
@media (hover:hover){.film .strip:hover .track{animation-play-state:paused}.film .track img:hover{opacity:1}}
@keyframes roll{to{transform:translateX(calc(-1*var(--set,50%)))}}
.film .track img{height:64px;width:auto;max-width:none;cursor:pointer;opacity:.7;transition:opacity .3s var(--ease)}
.film .track img.on{opacity:1}
.film .count{position:absolute;right:var(--m);top:calc(var(--bar) + var(--st) + 4px);font:400 11px var(--mono);font-variant-numeric:tabular-nums;z-index:4}
.film .half{position:absolute;top:calc(var(--bar) + var(--st));bottom:calc(var(--bar) + var(--sb));width:50%;z-index:2}
.film .half.p{left:0;cursor:w-resize}.film .half.n{right:0;cursor:e-resize}

/* =============== CONTENT =============== */
.cgrid{row-gap:120px}
.c1{grid-column:2/6}.c2{grid-column:8/11;margin-top:180px}.c3{grid-column:4/8}.c4{grid-column:9/13;margin-top:120px}
.media{position:relative;align-self:start}
.media video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--paper)}
.media .dur{position:absolute;right:10px;bottom:8px;font:10px var(--mono);font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.6);pointer-events:none}

/* =============== WEB =============== */
.web .list{grid-column:1/4;position:sticky;top:calc(var(--bar) + 44px + var(--st));align-self:start;font:11px/1.6 var(--sans);padding-left:14px;display:flex;flex-direction:column;gap:14px}
.web .list a{position:relative;display:grid;grid-template-columns:1fr 4ch;gap:12px;color:var(--g1);transition:color .3s var(--ease)}
.web .list a>span:last-child{font:11px/1.6 var(--mono);font-variant-numeric:tabular-nums}
.web .list a.on{color:var(--ink)}
@media (hover:hover){.web .list a:hover{color:var(--ink)}}
.web .list a.on::before{content:"";position:absolute;left:-14px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.web .list small{display:block;font:11px var(--sans);color:var(--g1)}
.web .stage{grid-column:4/13;position:relative}
.web .case{display:none}.web .case.on{display:block;animation:in .6s var(--ease) both}
.web .case>a{display:block}
.web .shot{width:100%;border:1px solid var(--g2)}
.web .mob{position:absolute;right:-8px;bottom:-56px;width:22%;border:1px solid var(--g2);box-shadow:0 40px 60px -36px rgba(20,20,18,.45)}
.web .shot.tall{width:auto;max-width:100%;max-height:calc(100svh - var(--bar)*2 - 52px - var(--st) - var(--sb))}
.web .pair{margin-top:var(--gap)}
.web .phbox{aspect-ratio:16/10;border:1px solid var(--g2);display:grid;place-items:center;font:11px var(--sans);color:var(--g1)}

/* short desktop windows (e.g. 1440x900 screen minus browser chrome): trim only the spacing the spec leaves open,
   keep the 48px block-to-index gap and 56px thumbs */
@media (min-width:821px) and (max-height:840px){
  .p-home main{--pt:14px;padding-bottom:calc(var(--bar) + 12px + var(--sb))}
  .home{--top-h:208px;--hero-mt:16px}
}
/* phone-only pieces are hidden on larger screens; the vellum wrapper is transparent to the desktop grid */
.name-m,.menu-btn,.menu,.scrim{display:none}
.about{display:contents}
.irow{display:contents}

@media (max-width:820px){
  :root{--m:16px}
  .top .cap{display:none}
  .top nav{display:none}
  .bot .l{grid-column:1/13;gap:14px;font-size:12px}.bot .r{display:none}
  .bot .credit{display:none}

  /* top-left: "About" on home (toggles the vellum), the name on every other page (goes home) */
  .top .name{grid-column:1/9;font-size:12px}
  body:not(.p-home) .top .name{display:none}
  .name-m{display:block;grid-column:1/9;justify-self:start;padding:13px 0;font:italic 400 17px/1 "Times New Roman",Times,serif;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
  .p-home .top .name.on{color:rgba(20,20,18,.55)}
  .p-home .top .name.on::before{display:none}
  .about-open .top .name.on{color:var(--ink)}
  .about-open .top .name.on::before{display:inline-block}

  /* top-right: a thin light plus; swaps to a small grey "close" when the menu is open */
  .menu-btn{display:grid;place-items:center;grid-column:11/13;justify-self:end;position:relative;width:44px;height:44px;margin-right:-11px}
  .menu-btn svg{width:18px;height:18px;fill:none;stroke:rgba(20,20,18,.55);stroke-width:1;transition:opacity .3s var(--ease),transform .5s var(--ease)}
  .menu-btn .mclose{position:absolute;right:11px;top:50%;transform:translateY(-50%);font:12px var(--sans);color:var(--g1);opacity:0;transition:opacity .3s var(--ease)}
  .menu-btn[aria-expanded="true"] svg{opacity:0;transform:scale(.7)}
  .menu-btn[aria-expanded="true"] .mclose{opacity:1;transition-delay:.12s}

  /* menu: a paper band unrolling from under the top bar, big Helvetica lines, page behind fades */
  .menu{display:flex;flex-direction:column;align-items:flex-end;gap:2px;position:fixed;left:0;right:0;top:calc(var(--bar) + var(--st));z-index:46;background:var(--paper);border-bottom:1px solid var(--g2);padding:14px var(--m) 26px;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s .55s}
  .menu-open .menu{clip-path:inset(0);visibility:visible;transition:clip-path .55s var(--ease)}
  .menu a{font:400 40px/1.1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.03em;color:var(--ink);padding:2px 0;opacity:0;transform:translateY(-8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .menu-open .menu a{opacity:1;transform:none;transition-delay:calc(90ms + var(--k)*45ms)}
  .menu .arr{width:.42em;height:.42em;margin-left:.08em;vertical-align:.62em;fill:none;stroke:currentColor;stroke-width:1.25}
  .menu a.on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:12px;vertical-align:.32em}
  .scrim{display:block;position:fixed;inset:0;z-index:44;background:rgba(245,244,240,.6);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
  .menu-open .scrim{opacity:1;pointer-events:auto}

  /* home landing = one screen: name, block, two-row index that scrolls sideways */
  .p-home main{padding-top:calc(var(--bar) + var(--st) + 20px);padding-bottom:calc(var(--bar) + var(--sb) + 20px)}
  .home{container-type:normal;--hero-mt:0px;min-height:calc(100svh - var(--bar)*2 - var(--st) - var(--sb) - 40px);grid-template-rows:auto 1fr auto;row-gap:24px}
  .home .hero,.home .index,.wordmark{grid-row:auto}
  .wordmark{align-self:start;margin:0;font-size:44px}
  .wordmark span{display:inline}
  .home .hero{align-self:center;margin:0 auto}
  .index{display:flex;flex-direction:column;flex-wrap:nowrap;gap:14px;margin:0 calc(-1*var(--m));padding:0 var(--m);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .index::-webkit-scrollbar{display:none}
  .irow{display:flex;gap:14px;width:max-content;padding-right:var(--m)}

  /* About = a sheet of tracing paper dropped over the page: the work shows through, softened */
  .about{display:block;position:fixed;left:0;right:0;top:calc(var(--bar) + var(--st));bottom:calc(var(--bar) + var(--sb));z-index:45;overflow-y:auto;overscroll-behavior:contain;padding:28px var(--m) 40px;background:rgba(245,244,240,.62);-webkit-backdrop-filter:blur(16px) saturate(.85);backdrop-filter:blur(16px) saturate(.85);border-bottom:1px solid var(--g2);transform:translateY(-100%);visibility:hidden;transition:transform .7s var(--ease),visibility 0s .7s}
  .about-open .about{transform:none;visibility:visible;transition:transform .7s var(--ease)}
  .about.dragging{transition:none}
  .home .bio,.home .aside,.home .hl{grid-row:auto}
  .home .aside{margin:28px 0 0;max-width:40ch}
  .home .hl{margin-top:28px}

  .film .strip{height:48px}.film .track img{height:48px}
  .c1,.c2,.c3,.c4{grid-column:2/12;margin-top:0}
  .cgrid{row-gap:64px}
  .web .list{grid-column:1/13;position:static;flex-direction:row;flex-wrap:wrap;gap:14px 28px;margin-bottom:24px}
  .web .list a{grid-template-columns:auto auto}
  .web .stage{grid-column:1/13}
  .web .mob{position:static;width:60%;margin:24px auto 0}
  .web .shot.tall{width:100%;max-height:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .film .track{animation:none!important}
}